migrate ProductCard component to tailwind

Author: yashtotla

src/components/ProductCard.tsx

@@ -1,24 +1,19 @@
-import React, { ReactNode } from "react"
+import type { ImageProps } from "next/image"
 import { useTranslation } from "next-i18next"
-import {
-  Badge,
-  Box,
-  Center,
-  Flex,
-  Heading,
-  HStack,
-  TextProps,
-} from "@chakra-ui/react"
+import type { ReactNode } from "react"
+import { Badge } from "@chakra-ui/react"
 
 import { ButtonLink } from "@/components/Buttons"
-import { Image, type ImageProps } from "@/components/Image"
-import Text from "@/components/OldText"
 
+import { cn } from "@/lib/utils/cn"
+
+import { Center, Flex, HStack } from "./ui/flex"
 import GitStars from "./GitStars"
+import { TwImage } from "./Image"
 
 type SubjectBadgeProps = {
   subject: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const SubjectBadge = ({ subject, children }: SubjectBadgeProps) => {
@@ -56,7 +51,7 @@ const SubjectBadge = ({ subject, children }: SubjectBadgeProps) => {
 }
 
 export type ProductCardProps = {
-  children?: React.ReactNode
+  children?: ReactNode
   url: string
   background: string
   image: ImageProps["src"]
@@ -87,71 +82,53 @@ const ProductCard = ({
   hideStars = false,
 }: ProductCardProps) => {
   const { t } = useTranslation("common")
-  const DESCRIPTION_STYLES: TextProps = {
-    opacity: 0.8,
-    fontSize: "sm",
-    mb: 2,
-    lineHeight: "140%",
-  }
 
   return (
     <Flex
-      flexDirection="column"
-      justifyContent="space-between"
-      color="text"
-      background="searchBackground"
-      boxShadow="0px 14px 66px rgba(0, 0, 0, 0.07)"
-      borderRadius="base"
-      border="1px"
-      borderColor="lightBorder"
-      textDecoration="none"
-      _hover={{
-        transition: "transform 0.1s",
-        transform: "scale(1.02)",
-      }}
+      className={cn(
+        "text-text bg-searchBackground flex-col justify-between",
+        "shadow-product-card",
+        "rounded-base border border-gray-100 no-underline",
+        "hover:scale-[1.02] hover:transition-transform"
+      )}
     >
       <Center
-        background={bgProp}
-        boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
-        minH="200px"
+        className="min-h-[200px] shadow-product-card-img-container"
+        style={{ backgroundColor: bgProp }}
       >
-        <Image
-          src={image}
-          alt={alt}
-          height="100"
-          alignSelf="center"
-          maxW={{ base: "311px", sm: "372px" }}
-          maxH="257px"
-        />
+        <TwImage src={image} alt={alt} className="w-[100px] self-center" />
       </Center>
-      <Flex flexDirection="column" p={6} textAlign="start" height="100%">
+      <Flex className="h-full flex-col p-6 text-left">
         {githubRepoStars > 0 && (
           <GitStars
             gitHubRepo={{ url: githubUrl, stargazerCount: githubRepoStars }}
             hideStars={hideStars}
           />
         )}
-        <Heading
-          as="h3"
-          fontSize="2xl"
-          fontWeight={600}
-          mt={githubRepoStars > 0 ? 8 : 12}
-          mb={3}
+        <h3
+          className={cn(
+            "mb-3 text-2xl font-semibold",
+            githubRepoStars > 0 ? "mt-8" : "mt-12"
+          )}
         >
           {name}
-        </Heading>
-        {description && <Text {...DESCRIPTION_STYLES}>{description}</Text>}
-        {note.length > 0 && <Text {...DESCRIPTION_STYLES}>Note: {note}</Text>}
-        {children && <Box mt={4}>{children}</Box>}
+        </h3>
+        {description && (
+          <p className="mb-2 text-sm leading-xs opacity-80">{description}</p>
+        )}
+        {note.length > 0 && (
+          <p className="mb-2 text-sm leading-xs opacity-80">Note: {note}</p>
+        )}
+        {children && <div className="mt-4">{children}</div>}
       </Flex>
-      <HStack mt={5} mb={2} px={6} spacing={3}>
+      <HStack className="mb-2 mt-5 gap-3 px-6">
         {subjects &&
           subjects.map((subject, idx) => (
             <SubjectBadge key={idx} subject={subject}>
               {subject}
             </SubjectBadge>
           ))}
-        {githubRepoLanguages.length &&
+        {githubRepoLanguages.length > 0 &&
           githubRepoLanguages.map((name, idx: number) => (
             <SubjectBadge key={idx} subject={name}>
               {name.toUpperCase()}

src/components/ui/command.tsx

@@ -123,7 +123,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("bg-border -mx-1 h-px", className)}
+    className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
 ))

tailwind.config.ts

@@ -247,6 +247,8 @@ const config = {
           var(--shadow-window-box-1), var(--shadow-window-box-2),
           var(--shadow-window-box-3), var(--shadow-window-box-4),
           var(--shadow-window-box-5)`,
+        "product-card": "0px 14px 66px rgba(0, 0, 0, 0.07)",
+        "product-card-img-container": "inset 0px -1px 0px rgba(0, 0, 0, 0.1)",
       },
       spacing: {
         7.5: "1.875rem",