Fixed all mdx components styling for code blocks and dropdowns (#60)

Co-authored-by: Shanu Goyanka <[email protected]>

components/mdx.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Tab as HeadlessTab } from "@headlessui/react";
 
 function InfoIcon(props) {
@@ -126,6 +126,32 @@ export function Tabs({ children, half = false }) {
   );
 }
 
+export function DropDownTabs({ children, half = false }) {
+  const [selectedTab, setSelectedTab] = useState(0);
+
+  const handleTabChange = (event) => {
+    setSelectedTab(parseInt(event.target.value));
+  };
+  return (
+    <div>
+      <select
+        className="nx-rounded-lg nx-p-4 nx-text-sm nx-font-medium nx-bg-white nx-border nx-border-black/10 outline-none pr-6"
+        value={selectedTab}
+        onChange={handleTabChange}
+      >
+        {React.Children.map(children, (child, index) => (
+          <option key={index} value={index}>
+            {child.props.heading}
+          </option>
+        ))}
+      </select>
+      {React.Children.map(children, (child, index) => (
+        index === selectedTab ? child.props.children : null
+      ))}
+    </div>
+  );
+}
+
 
 export function Tab(props) {
   return <HeadlessTab {...props}/>

pages/apis/agentverse/hosting.mdx

@@ -1,11 +1,11 @@
 import {Note, Properties, Property, Warn, Section, ApiIntro, Tag, CodeHeading} from "../../../components/mdx";
-import {Tabs, Tab} from "../../../components/mdx";
+import {DropDownTabs, Tab} from "../../../components/mdx";
 import {Row, Col} from "../../../components/mdx";
 import ApiEndpoint from "../../../components/api-endpoint";
 
 # Hosting API
 
-This is a placeholder incase we want to have a subtitle for a brief description/intro text in article pages. 
+<div className='nx-text-fetch-content'>This is a placeholder incase we want to have a subtitle for a brief description/intro text in article pages.</div>
 
 ## Overview
 
@@ -95,7 +95,7 @@ This is a placeholder incase we want to have a subtitle for a brief description/
         <div className="text-gray-400 italic">no parameters</div>
     </Col>
     <Col>
-        <Tabs>
+        <DropDownTabs>
             <Tab heading="curl">
                 ```bash filename="Shell command" copy
                 curl -X GET \
@@ -116,15 +116,14 @@ This is a placeholder incase we want to have a subtitle for a brief description/
 
             <Tab heading="javascript">
                 ```js filename="Using fetch API" copy
-                await fetch('https://agentverse.ai/v1/hosting/agents', {
-                method: 'GET',
-                headers: {
-                Authorization: `Bearer ${token}`,
-            }
-            }
+                        await fetch('https://agentverse.ai/v1/hosting/agents', {
+                        method: 'GET',
+                        headers: {
+                        Authorization: `Bearer ${token}`,
+                    }
                 ```
             </Tab>
-        </Tabs>
+        </DropDownTabs>
     </Col>
 </Row>
 
@@ -136,7 +135,7 @@ This is a placeholder incase we want to have a subtitle for a brief description/
         On a successful request, the response will be an array of [Agent Objects](#the-agent-object)
     </Col>
     <Col>
-        <Tabs>
+        <DropDownTabs>
             <Tab heading="HTTP 200">
                 ```json filename="List of Agents"
                 [
@@ -152,7 +151,7 @@ This is a placeholder incase we want to have a subtitle for a brief description/
                 ]
                 ```
             </Tab>
-        </Tabs>
+        </DropDownTabs>
     </Col>
 </Row>
 
@@ -189,7 +188,7 @@ This is a placeholder incase we want to have a subtitle for a brief description/
         On Successful creation of an agent, the response will be an [Agent Object](#the-agent-object)
     </Col>
     <Col>
-        <Tabs>
+        <DropDownTabs>
             <Tab heading="curl">
                 ```bash filename="Shell command" copy
                 curl -X GET \
@@ -218,7 +217,7 @@ This is a placeholder incase we want to have a subtitle for a brief description/
             }
                 ```
             </Tab>
-        </Tabs>
+        </DropDownTabs>
     </Col>
 </Row>
 
@@ -232,7 +231,7 @@ This is a placeholder incase we want to have a subtitle for a brief description/
         </ApiIntro>
     </Col>
     <Col>
-        <Tabs>
+        <DropDownTabs>
             <Tab heading="curl">
                 ```bash copy
                 curl https://api.example.com/v1/balance -u sk_test_4eC39HqLyjWDarjtT1zdp7dc:
@@ -259,7 +258,7 @@ This is a placeholder incase we want to have a subtitle for a brief description/
             }
                 ```
             </Tab>
-        </Tabs>
+        </DropDownTabs>
     </Col>
 </Row>
 

styles/globals.css

@@ -1549,10 +1549,22 @@ video {
   color: rgba(30, 58, 138, var(--tw-text-opacity))
 }
 
+.nx-text-fetch-content {
+  color: rgba(11, 23, 66, 0.6)
+}
+
+.nx-text-fetch-main {
+  color: rgba(11, 23, 66, 1)
+}
+
 .nx-text-purple {
   color: rgba(95, 56, 251, 1)
 }
 
+.nx-border-purple {
+  border-color: rgba(95, 56, 251, 1)
+}
+
 .nx-text-current {
   color: currentColor
 }
@@ -2022,6 +2034,12 @@ pre code {
   padding: 0 !important
 }
 
+.nx-pre-code {
+  border-radius: 12px;
+  background: rgba(52, 52, 52, 0.08);
+  box-shadow: 10px 20px 100px 0px rgba(243, 245, 248, 0.30) inset;
+}
+
 :is(html[class~=dark] pre code) {
   background-color: transparent !important
 }

theme/fetch-ai-docs/components/search.tsx

@@ -192,7 +192,7 @@ export function Search({
   )
 
   return (
-    <div className={cn('nextra-search nx-relative md:nx-w-64', className)}>
+    <div className={focused ? cn('nextra-search nx-relative nx-footer-width-50 nx-rounded-t-xl nx-border-purple', className) : cn('nextra-search nx-relative md:nx-w-64', className)}>
       {renderList && (
         <div
           className="nx-fixed nx-inset-0 nx-z-10"

theme/fetch-ai-docs/mdx-components.tsx

@@ -234,7 +234,9 @@ export const getComponents = ({
     td: Td,
     details: Details,
     summary: Summary,
-    pre: Pre,
+    pre: props => (
+      <Pre className='nx-pre-code nx-text-fetch-main' {...props}/>
+    ),
     code: Code,
     ...components
   }