feat: add to link api call names in description - generalise

Author: utkarsha-deriv

src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss

@@ -1,18 +1,23 @@
 @use 'src/styles/utility' as *;
 
 .schemaRole {
-    background-color: rgba(255, 255, 255, 0.16);
-    border: none;
-    font-size: rem(1.4);
-    font-weight: 400;
-    line-height: rem(2.4);
-    color: var(--ifm-color-white);
-    height: fit-content;
-    padding: rem(0.5) rem(0.5);
-    margin: 0 rem(0.5);
+  background-color: rgba(255, 255, 255, 0.16);
+  border: none;
+  font-size: rem(1.4);
+  font-weight: 400;
+  line-height: rem(2.4);
+  color: var(--ifm-color-white);
+  height: fit-content;
+  padding: rem(0.5) rem(0.5);
+  margin: 0 rem(0.5);
 }
-  
+
 .schemaCode {
-    color: var(--ifm-color-white);
-    font-size: rem(1.4);
+  color: var(--ifm-color-white);
+  font-size: rem(1.4);
+}
+
+.schemaLink {
+  cursor: pointer;
+  text-decoration: underline;
 }

src/features/Apiexplorer/Schema/HighlightCode/index.tsx

@@ -1,16 +1,38 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './HighlightCode.module.scss';
+import { playground_requests } from '@site/src/utils/playground_requests';
 import { SchemaDescriptionTypes } from '../RecursiveContent/SchemaDescription';
+import { useHistory, useLocation } from '@docusaurus/router';
 
 export const HighlightCode = ({ description }: SchemaDescriptionTypes) => {
+  const { pathname } = useLocation();
+  const history = useHistory();
+
   if (!description) return null;
 
   const [first, code, ...rest] = description.split('`');
+
+  const api_call_object = playground_requests.find((el) => el.name === code);
+  const link_api_call = (obj) => {
+    window.scrollTo(0, 0);
+    history.push(`${pathname}#${obj?.name}`);
+  };
+
   return (
     <React.Fragment>
       {first}
-      {code && <span className={clsx(styles.schemaRole, styles.schemaCode)}>{code}</span>}
+      {code && (
+        <span className={clsx(styles.schemaRole, styles.schemaCode)}>
+          {api_call_object ? (
+            <button onClick={() => link_api_call(api_call_object)} className={styles.schemaLink}>
+              {code}
+            </button>
+          ) : (
+            code
+          )}
+        </span>
+      )}
       {rest.length > 0 && <HighlightCode description={rest.join('`')} />}
     </React.Fragment>
   );