Merge pull request #13850 from saurabhburade/shadcn-migrate/GlossaryDefinition

Shadcn migration - GlossaryDefinition

Author: pettinarip

src/components/Glossary/GlossaryDefinition/index.tsx

@@ -1,10 +1,11 @@
 import { ComponentProps } from "react"
-import { type HeadingProps, Text, VStack } from "@chakra-ui/react"
 
-import Heading from "@/components/Heading"
 import IdAnchor from "@/components/IdAnchor"
-import InlineLink from "@/components/Link"
 import Translation from "@/components/Translation"
+import { Stack } from "@/components/ui/flex"
+import InlineLink from "@/components/ui/Link"
+
+import { cn } from "@/lib/utils/cn"
 
 import { DEFAULT_GLOSSARY_NS } from "@/lib/constants"
 
@@ -25,42 +26,30 @@ const GlossaryDefinition = ({
   size = "md",
   options = { ns: DEFAULT_GLOSSARY_NS },
 }: GlossaryDefinitionProps) => {
-  const textStyles = size === "sm" ? { mb: 0 } : {}
-
-  const headingPropsForAnchor = (id?: string): HeadingProps => {
-    if (!id) return {}
-    return {
-      scrollMarginTop: 28,
-      id,
-      "data-group": true,
-      position: "relative",
-    } as HeadingProps
-  }
+  const textClasses = size === "sm" ? "mb-0" : ""
 
   return (
-    <VStack spacing={4} align="stretch" textAlign="start" mb={8}>
-      <Heading size="md" {...headingPropsForAnchor(term)}>
+    <Stack className="mb-8 items-stretch gap-4 text-start">
+      <h4
+        className={term ? "relative scroll-mt-28" : ""}
+        {...(term ? { "data-group": true, id: term } : {})}
+      >
         <IdAnchor id={term} />
         <Translation
           id={term + "-term"}
           options={options}
           transform={components}
         />
-      </Heading>
-      {/**
-       * `as="span"` prevents hydration warnings for strings that contain
-       * elements that cannot be nested inside `p` tags, like `ul` tags
-       * (found in some Glossary definition).
-       * TODO: Develop a better solution to handle this case.
-       */}
-      <Text as="span" {...textStyles}>
+      </h4>
+
+      <div className={cn("inline-block", textClasses)}>
         <Translation
           id={term + "-definition"}
           options={options}
           transform={components}
         />
-      </Text>
-    </VStack>
+      </div>
+    </Stack>
   )
 }