migrate docs layout to tailwind

Author: pettinarip

src/layouts/Docs.tsx

@@ -1,16 +1,6 @@
 import { useRouter } from "next/router"
 import type { HTMLAttributes } from "react"
-import {
-  Badge,
-  Box,
-  type BoxProps,
-  Flex,
-  type FlexProps,
-  type ListProps,
-  OrderedList as ChakraOrderedList,
-  UnorderedList as ChakraUnorderedList,
-  useToken,
-} from "@chakra-ui/react"
+import { Badge } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 import type { DocsFrontmatter, MdPageContent } from "@/lib/interfaces"
@@ -27,47 +17,33 @@ import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
 import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip"
 import InfoBanner from "@/components/InfoBanner"
-import Link from "@/components/Link"
 import MainArticle from "@/components/MainArticle"
 import {
   Heading1 as MdHeading1,
   Heading2 as MdHeading2,
   Heading3 as MdHeading3,
   Heading4 as MdHeading4,
-  Paragraph,
 } from "@/components/MdComponents"
 import RollupProductDevDoc from "@/components/RollupProductDevDoc"
 import SideNav from "@/components/SideNav"
 import SideNavMobile from "@/components/SideNavMobile"
 import TableOfContents from "@/components/TableOfContents"
 import Translation from "@/components/Translation"
 import { Divider } from "@/components/ui/divider"
+import InlineLink from "@/components/ui/Link"
 import { mdxTableComponents } from "@/components/ui/Table"
 import YouTube from "@/components/YouTube"
 
 import { cn } from "@/lib/utils/cn"
 import { getEditPath } from "@/lib/utils/editPath"
 
-const Page = (props: ChildOnlyProp & Pick<FlexProps, "dir">) => (
-  <Flex
-    direction="column"
-    w="full"
-    borderBottom="1px"
-    borderColor="border"
-    {...props}
-  />
+const Page = (props: HTMLAttributes<HTMLDivElement>) => (
+  <div className="flex w-full flex-col border-b" {...props} />
 )
 
-type ContentContainerProps = Pick<BoxProps, "children" | "dir">
-
-const ContentContainer = (props: ContentContainerProps) => (
-  <Flex
-    justify={"space-between"}
-    w="full"
-    py={0}
-    ps={0}
-    pe={{ base: 0, lg: 8 }}
-    backgroundColor="ednBackground"
+const ContentContainer = (props: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className="flex justify-between bg-background-highlight lg:pe-8"
     {...props}
   />
 )
@@ -101,61 +77,28 @@ const H4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading4 className={baseSubHeadingClasses} {...props} />
 )
 
-const UnorderedList = (props: ListProps) => (
-  <ChakraUnorderedList ms="1.45rem" {...props} />
-)
-const OrderedList = (props: ListProps) => (
-  <ChakraOrderedList ms="1.45rem" {...props} />
-)
-
-// Apply styles for classes within markdown here
 const Content = (props: ChildOnlyProp) => {
-  const mdBreakpoint = useToken("breakpoints", "md")
-
   return (
-    <Box
-      as={MainArticle}
-      flex={`1 1 ${mdBreakpoint}`}
-      w={{ base: "full", lg: "0" }}
-      pt={{ base: 8, md: 12 }}
-      pb={{ base: 8, md: 16 }}
-      px={{ base: 8, md: 16 }}
-      m="0 auto"
-      sx={{
-        ".citation": {
-          p: {
-            color: "text200",
-          },
-        },
-      }}
+    <MainArticle
+      className="min-w-0 flex-1 px-8 pb-8 pt-8 md:px-16 md:pb-16 md:pt-12"
       {...props}
     />
   )
 }
 
 const BackToTop = (props: ChildOnlyProp) => (
-  <Flex
-    display={{ lg: "none" }}
-    mt={12}
-    pt={8}
-    borderTop="1px"
-    borderColor="border"
-    {...props}
-  >
-    <Link href="#top">
+  <div className="display-none mt-12 flex border-t pt-8" {...props}>
+    <InlineLink href="#top">
       <Translation id="back-to-top" /> ↑
-    </Link>
-  </Flex>
+    </InlineLink>
+  </div>
 )
 
 export const docsComponents = {
   h1: H1,
   h2: H2,
   h3: H3,
   h4: H4,
-  p: Paragraph,
-  ul: UnorderedList,
-  ol: OrderedList,
   pre: Codeblock,
   ...mdxTableComponents,
   Badge,