migrate tutorials layout to tailwind

Author: pettinarip

src/layouts/Tutorial.tsx

@@ -1,15 +1,6 @@
 import { useRouter } from "next/router"
 import type { HTMLAttributes } from "react"
-import {
-  Badge,
-  Box,
-  type BoxProps,
-  Flex,
-  Kbd,
-  Text,
-  type TextProps,
-  useToken,
-} from "@chakra-ui/react"
+import { Badge } from "@chakra-ui/react"
 
 import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, TutorialFrontmatter } from "@/lib/interfaces"
@@ -22,7 +13,6 @@ import Emoji from "@/components/Emoji"
 import EnvWarningBanner from "@/components/EnvWarningBanner"
 import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
-import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip"
 import InfoBanner from "@/components/InfoBanner"
 import MainArticle from "@/components/MainArticle"
 import {
@@ -34,33 +24,16 @@ import {
 import TableOfContents from "@/components/TableOfContents"
 import TooltipLink from "@/components/TooltipLink"
 import TutorialMetadata from "@/components/TutorialMetadata"
-import { Divider } from "@/components/ui/divider"
 import { mdxTableComponents } from "@/components/ui/Table"
 import YouTube from "@/components/YouTube"
 
 import { getEditPath } from "@/lib/utils/editPath"
 
-type ContentContainerProps = Pick<BoxProps, "children" | "dir">
-
-const ContentContainer = (props: ContentContainerProps) => {
-  const boxShadow = useToken("colors", "tableBoxShadow")
-
+const ContentContainer = (props: HTMLAttributes<HTMLDivElement>) => {
   return (
-    <Box
-      as={MainArticle}
-      maxW="1000px"
-      minW={0}
-      background="background.base"
-      boxShadow={{ base: "none", lg: boxShadow }}
-      m={{ base: "2.5rem 0rem", lg: "2rem 2rem 6rem" }}
-      p={{ base: "3rem 2rem", lg: 16 }}
-      borderRadius="4px"
+    <MainArticle
+      className="min-w-0 max-w-[1000px] rounded bg-background p-0 lg:p-16 lg:shadow"
       {...props}
-      sx={{
-        ".citation": {
-          p: { color: "text200" },
-        },
-      }}
     />
   )
 }
@@ -93,25 +66,16 @@ const Heading4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   />
 )
 
-const StyledDivider = (props) => <Divider {...props} />
-
-const Paragraph = (props: TextProps) => (
-  <Text as="p" mt={8} mb={4} mx={0} color="text300" fontSize="md" {...props} />
+const Paragraph = (props: HTMLAttributes<HTMLParagraphElement>) => (
+  <p className="mx-0 mb-4 mt-8" {...props} />
 )
 
-const KBD = (props) => {
-  const borderColor = useToken("colors", "primary.base")
-
-  return (
-    <Kbd
-      verticalAlign="middle"
-      p="0.15rem 0.45rem"
-      borderRadius="2px"
-      border={`1px solid ${borderColor}`}
-      {...props}
-    />
-  )
-}
+const KBD = (props: HTMLAttributes<HTMLElement>) => (
+  <kbd
+    className="rounded-sm border-2 border-primary px-2 py-0.5 align-middle"
+    {...props}
+  />
+)
 
 export const tutorialsComponents = {
   a: TooltipLink,
@@ -129,9 +93,7 @@ export const tutorialsComponents = {
   Card,
   Emoji,
   EnvWarningBanner,
-  GlossaryTooltip,
   InfoBanner,
-  StyledDivider,
   YouTube,
 }
 type TutorialLayoutProps = ChildOnlyProp &
@@ -153,44 +115,34 @@ export const TutorialLayout = ({
   const { asPath: relativePath } = useRouter()
   const absoluteEditPath = getEditPath(relativePath)
 
-  const borderColor = useToken("colors", "border")
-
   return (
-    <>
-      <Flex
-        w="100%"
-        borderBottom={`1px solid ${borderColor}`}
-        m={{ base: "2rem 0rem", lg: "0 auto" }}
-        p={{ base: "0", lg: "0 2rem 0 0" }}
-        background={{ base: "background.base", lg: "ednBackground" }}
-      >
-        <ContentContainer dir={contentNotTranslated ? "ltr" : "unset"}>
-          <Heading1>{frontmatter.title}</Heading1>
-          <TutorialMetadata frontmatter={frontmatter} timeToRead={timeToRead} />
-          <TableOfContents
-            items={tocItems}
-            maxDepth={frontmatter.sidebarDepth!}
-            editPath={absoluteEditPath}
-            isMobile
-            pt={8}
-          />
-          {children}
-          <FileContributors
-            contributors={contributors}
-            lastEditLocaleTimestamp={lastEditLocaleTimestamp}
-          />
-          <FeedbackCard />
-        </ContentContainer>
-        {tocItems && (
-          <TableOfContents
-            items={tocItems}
-            maxDepth={frontmatter.sidebarDepth!}
-            editPath={absoluteEditPath}
-            hideEditButton={!!frontmatter.hideEditButton}
-            pt={16}
-          />
-        )}
-      </Flex>
-    </>
+    <div className="flex w-full gap-8 border-b bg-background p-8 lg:mx-auto lg:bg-background-highlight lg:shadow">
+      <ContentContainer dir={contentNotTranslated ? "ltr" : "unset"}>
+        <Heading1>{frontmatter.title}</Heading1>
+        <TutorialMetadata frontmatter={frontmatter} timeToRead={timeToRead} />
+        <TableOfContents
+          items={tocItems}
+          maxDepth={frontmatter.sidebarDepth!}
+          editPath={absoluteEditPath}
+          isMobile
+          pt={8}
+        />
+        {children}
+        <FileContributors
+          contributors={contributors}
+          lastEditLocaleTimestamp={lastEditLocaleTimestamp}
+        />
+        <FeedbackCard />
+      </ContentContainer>
+      {tocItems && (
+        <TableOfContents
+          items={tocItems}
+          maxDepth={frontmatter.sidebarDepth!}
+          editPath={absoluteEditPath}
+          hideEditButton={!!frontmatter.hideEditButton}
+          pt={8}
+        />
+      )}
+    </div>
   )
 }