From c58faabadff7fa6bddad3ca3d3e731656c66502f Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:56:24 +0530
Subject: [PATCH 1/3] feat: migrate Layer2ProductCard to tailwind and shadcn

---
 src/components/Layer2ProductCard.tsx | 139 +++++++++++++++------------
 src/components/ui/button.tsx         |  56 +++++++++++
 2 files changed, 132 insertions(+), 63 deletions(-)
 create mode 100644 src/components/ui/button.tsx

diff --git a/src/components/Layer2ProductCard.tsx b/src/components/Layer2ProductCard.tsx
index a4c637fb900..d07612f2353 100644
--- a/src/components/Layer2ProductCard.tsx
+++ b/src/components/Layer2ProductCard.tsx
@@ -1,12 +1,12 @@
-// Libraries
 import { StaticImageData } from "next/image"
+import Image from "next/image"
+import Link from "next/link"
 import { useTranslation } from "next-i18next"
-import { Box, Center, Flex, Heading } from "@chakra-ui/react"
+import { RiExternalLinkLine } from "react-icons/ri"
 
-import { ButtonLink } from "@/components/Buttons"
-import { Image } from "@/components/Image"
-import InlineLink from "@/components/Link"
-import Text from "@/components/OldText"
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
+
+import { Button } from "./ui/button"
 
 export type Layer2ProductCardProps = {
   children?: React.ReactNode
@@ -38,72 +38,85 @@ const Layer2ProductCard = ({
   const { t } = useTranslation("page-layer-2")
 
   return (
-    <Flex
-      color="text"
-      boxShadow={"0px 14px 66px rgba(0, 0, 0, 0.07)"}
-      direction="column"
-      justify="space-between"
-      bg="searchBackground"
-      borderRadius="base"
-      border={"1px solid lightBorder"}
-      textDecoration="none"
-      padding={2}
-      _hover={{ transition: "transform 0.1s", transform: "scale(1.02)" }}
-    >
-      <Center
-        bg={background}
-        boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
-        minH="200px"
+    <Card className="text-foreground flex flex-col justify-between rounded-md border-0 p-2 shadow-lg transition-transform duration-100 hover:scale-[1.02] dark:bg-background-medium">
+      <div
+        className="mb-4 flex min-h-[200px] items-center justify-center border-b"
+        style={{ backgroundColor: background }}
       >
         <Image
           src={image}
           alt={alt}
           width={100}
-          maxH={"257px"}
-          style={{ objectFit: "contain" }}
+          height={100}
+          className="max-h-[257px] object-contain"
         />
-      </Center>
-      <Flex p={6} h="100%" direction="column">
-        <Box>
-          <Heading as="h3" fontSize={{ base: "xl", md: "2xl" }} mb={3}>
-            {name}
-          </Heading>
-          {children && (
-            <Box mt={4} mb={4}>
-              {children}
-            </Box>
-          )}
-          <Text fontSize="sm" mb={2} lineHeight="140%">
-            {description}
-          </Text>
-          {note.length > 0 && (
-            <Text fontSize="sm" mb={2} lineHeight="140%">
+      </div>
+
+      <CardHeader className="py-0">
+        <div className="space-y-4">
+          <h3 className="mb-3 text-xl font-semibold md:text-2xl">{name}</h3>
+          {children && <div>{children}</div>}
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex flex-grow flex-col gap-0 space-y-1 px-6 py-4">
+        <div className="space-y-2">
+          <p className="text-sm leading-snug">{description}</p>
+
+          {note && (
+            <p className="text-sm leading-snug">
               {t("layer-2-note")} {note}
-            </Text>
+            </p>
           )}
-        </Box>
-        {bridge && (
-          <InlineLink href={bridge}>
-            {name} {t("layer-2-bridge")}
-          </InlineLink>
-        )}
-        {ecosystemPortal && (
-          <InlineLink href={ecosystemPortal}>
-            {name} {t("layer-2-ecosystem-portal")}
-          </InlineLink>
-        )}
-        {tokenLists && (
-          <InlineLink href={tokenLists}>
-            {name} {t("layer-2-token-lists")}
-          </InlineLink>
+        </div>
+
+        <div className="space-y-1">
+          {bridge && (
+            <Link
+              href={bridge}
+              className="block text-primary underline hover:text-primary/80"
+            >
+              {name} {t("layer-2-bridge")}
+            </Link>
+          )}
+
+          {ecosystemPortal && (
+            <Link
+              href={ecosystemPortal}
+              className="block text-primary underline hover:text-primary/80"
+            >
+              {name} {t("layer-2-ecosystem-portal")}
+            </Link>
+          )}
+
+          {tokenLists && (
+            <Link
+              href={tokenLists}
+              className="block text-primary underline hover:text-primary/80"
+            >
+              {name} {t("layer-2-token-lists")}
+            </Link>
+          )}
+        </div>
+      </CardContent>
+
+      <CardFooter className="mt-2 p-2">
+        {url && (
+          <Button
+            variant={"default"}
+            asChild
+            className="w-full rounded-sm hover:text-white hover:shadow-[4px_4px_4px_rgba(147,51,234,0.25)] dark:bg-primary-action dark:hover:bg-primary/90 dark:hover:shadow-[4px_4px_4px_rgba(0,0,0,0.9)]"
+          >
+            <Link
+              href={url}
+              className="flex items-center gap-0 text-lg text-white no-underline"
+            >
+              {t("layer-2-explore")} {name} <RiExternalLinkLine />
+            </Link>
+          </Button>
         )}
-      </Flex>
-      <Box>
-        <ButtonLink m={2} href={url} display="flex">
-          {t("layer-2-explore")} {name}
-        </ButtonLink>
-      </Box>
-    </Flex>
+      </CardFooter>
+    </Card>
   )
 }
 
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 00000000000..f22ae6df785
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@/lib/utils/cn"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

From f9b81f24dd8bfcd70449264cec4b72786007c488 Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Mon, 25 Nov 2024 17:28:29 +0530
Subject: [PATCH 2/3] fix: pr review changes

---
 src/components/Layer2ProductCard.tsx | 30 +++++++--------
 src/components/ui/button.tsx         | 56 ----------------------------
 2 files changed, 14 insertions(+), 72 deletions(-)
 delete mode 100644 src/components/ui/button.tsx

diff --git a/src/components/Layer2ProductCard.tsx b/src/components/Layer2ProductCard.tsx
index d07612f2353..032fef91469 100644
--- a/src/components/Layer2ProductCard.tsx
+++ b/src/components/Layer2ProductCard.tsx
@@ -1,12 +1,11 @@
 import { StaticImageData } from "next/image"
-import Image from "next/image"
-import Link from "next/link"
 import { useTranslation } from "next-i18next"
-import { RiExternalLinkLine } from "react-icons/ri"
 
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 
-import { Button } from "./ui/button"
+import { Button } from "./ui/buttons/Button"
+import InlineLink from "./ui/Link"
+import { TwImage } from "./Image"
 
 export type Layer2ProductCardProps = {
   children?: React.ReactNode
@@ -38,12 +37,12 @@ const Layer2ProductCard = ({
   const { t } = useTranslation("page-layer-2")
 
   return (
-    <Card className="text-foreground flex flex-col justify-between rounded-md border-0 p-2 shadow-lg transition-transform duration-100 hover:scale-[1.02] dark:bg-background-medium">
+    <Card className="flex flex-col justify-between rounded-md border-0 p-2 shadow-lg transition-transform duration-100 hover:scale-[1.02] dark:bg-background-medium">
       <div
         className="mb-4 flex min-h-[200px] items-center justify-center border-b"
         style={{ backgroundColor: background }}
       >
-        <Image
+        <TwImage
           src={image}
           alt={alt}
           width={100}
@@ -72,30 +71,30 @@ const Layer2ProductCard = ({
 
         <div className="space-y-1">
           {bridge && (
-            <Link
+            <InlineLink
               href={bridge}
               className="block text-primary underline hover:text-primary/80"
             >
               {name} {t("layer-2-bridge")}
-            </Link>
+            </InlineLink>
           )}
 
           {ecosystemPortal && (
-            <Link
+            <InlineLink
               href={ecosystemPortal}
               className="block text-primary underline hover:text-primary/80"
             >
               {name} {t("layer-2-ecosystem-portal")}
-            </Link>
+            </InlineLink>
           )}
 
           {tokenLists && (
-            <Link
+            <InlineLink
               href={tokenLists}
               className="block text-primary underline hover:text-primary/80"
             >
               {name} {t("layer-2-token-lists")}
-            </Link>
+            </InlineLink>
           )}
         </div>
       </CardContent>
@@ -103,16 +102,15 @@ const Layer2ProductCard = ({
       <CardFooter className="mt-2 p-2">
         {url && (
           <Button
-            variant={"default"}
             asChild
             className="w-full rounded-sm hover:text-white hover:shadow-[4px_4px_4px_rgba(147,51,234,0.25)] dark:bg-primary-action dark:hover:bg-primary/90 dark:hover:shadow-[4px_4px_4px_rgba(0,0,0,0.9)]"
           >
-            <Link
+            <InlineLink
               href={url}
               className="flex items-center gap-0 text-lg text-white no-underline"
             >
-              {t("layer-2-explore")} {name} <RiExternalLinkLine />
-            </Link>
+              {t("layer-2-explore")} {name}
+            </InlineLink>
           </Button>
         )}
       </CardFooter>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
deleted file mode 100644
index f22ae6df785..00000000000
--- a/src/components/ui/button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "@radix-ui/react-slot"
-
-import { cn } from "@/lib/utils/cn"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }

From 9e9ed13c4b1d5fdc23db6032bb988e5556652e2e Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Tue, 24 Dec 2024 12:48:17 +0100
Subject: [PATCH 3/3] refactor use ButtonLink

---
 src/components/Layer2ProductCard.tsx | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/src/components/Layer2ProductCard.tsx b/src/components/Layer2ProductCard.tsx
index 032fef91469..844654a86ce 100644
--- a/src/components/Layer2ProductCard.tsx
+++ b/src/components/Layer2ProductCard.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "next-i18next"
 
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 
-import { Button } from "./ui/buttons/Button"
+import { ButtonLink } from "./ui/buttons/Button"
 import InlineLink from "./ui/Link"
 import { TwImage } from "./Image"
 
@@ -37,7 +37,7 @@ const Layer2ProductCard = ({
   const { t } = useTranslation("page-layer-2")
 
   return (
-    <Card className="flex flex-col justify-between rounded-md border-0 p-2 shadow-lg transition-transform duration-100 hover:scale-[1.02] dark:bg-background-medium">
+    <Card className="flex flex-col justify-between rounded-md border-0 bg-background-highlight p-2 shadow-lg transition-transform duration-100 hover:scale-[1.02]">
       <div
         className="mb-4 flex min-h-[200px] items-center justify-center border-b"
         style={{ backgroundColor: background }}
@@ -46,8 +46,7 @@ const Layer2ProductCard = ({
           src={image}
           alt={alt}
           width={100}
-          height={100}
-          className="max-h-[257px] object-contain"
+          className="max-h-[257px] object-cover"
         />
       </div>
 
@@ -101,17 +100,9 @@ const Layer2ProductCard = ({
 
       <CardFooter className="mt-2 p-2">
         {url && (
-          <Button
-            asChild
-            className="w-full rounded-sm hover:text-white hover:shadow-[4px_4px_4px_rgba(147,51,234,0.25)] dark:bg-primary-action dark:hover:bg-primary/90 dark:hover:shadow-[4px_4px_4px_rgba(0,0,0,0.9)]"
-          >
-            <InlineLink
-              href={url}
-              className="flex items-center gap-0 text-lg text-white no-underline"
-            >
-              {t("layer-2-explore")} {name}
-            </InlineLink>
-          </Button>
+          <ButtonLink className="w-full" href={url}>
+            {t("layer-2-explore")} {name}
+          </ButtonLink>
         )}
       </CardFooter>
     </Card>