feat: migrate DeveloperDocsLinks to tailwind

Author: saurabhburade

src/components/DeveloperDocsLinks.tsx

@@ -1,11 +1,11 @@
 import React from "react"
-import { ListItem, UnorderedList } from "@chakra-ui/react"
 
-import InlineLink from "@/components/Link"
 import Translation from "@/components/Translation"
 
 import docLinks from "@/data/developer-docs-links.yaml"
 
+import InlineLink from "./ui/Link"
+
 export type DeveloperDocsLinksProps = {
   headerId: string
 }
@@ -15,10 +15,10 @@ const DeveloperDocsLinks = ({ headerId }: DeveloperDocsLinksProps) => (
     {docLinks
       .filter(({ id }) => id.includes(headerId))
       .map(({ items, id }) => (
-        <UnorderedList ms={6} spacing={3} key={id}>
+        <ul className="ms-6 space-y-3" key={id}>
           {items &&
             items.map(({ id, href, path, description, items }) => (
-              <ListItem key={id}>
+              <li key={id}>
                 {href || path ? (
                   <InlineLink href={href || path}>
                     <Translation id={`page-developers-docs:${id}`} />
@@ -30,24 +30,19 @@ const DeveloperDocsLinks = ({ headerId }: DeveloperDocsLinksProps) => (
                   {" – "}
                   <Translation id={`page-developers-docs:${description}`} />
                 </i>
-                <UnorderedList
-                  ms={6}
-                  mt={3}
-                  spacing={3}
-                  style={{ listStyleType: "circle" }}
-                >
+                <ul className="ms-6 mt-3 list-[circle] space-y-3">
                   {items &&
                     items.map(({ id, href, path }) => (
-                      <ListItem key={id}>
+                      <li key={id}>
                         <InlineLink href={href || path}>
                           <Translation id={`page-developers-docs:${id}`} />
                         </InlineLink>
-                      </ListItem>
+                      </li>
                     ))}
-                </UnorderedList>
-              </ListItem>
+                </ul>
+              </li>
             ))}
-        </UnorderedList>
+        </ul>
       ))}
   </React.Fragment>
 )