Migrate Contributors component to shadcn

src/components/Contributors.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react"
 import shuffle from "lodash/shuffle"
-import { Box, Flex, Image, LinkBox, LinkOverlay } from "@chakra-ui/react"
 
-import InlineLink from "@/components/Link"
-import Text from "@/components/OldText"
+import { Flex } from "@/components/ui/flex"
+import InlineLink from "@/components/ui/Link"
+import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
 
 import data from "!!raw-loader!@/../.all-contributorsrc"
 
@@ -31,52 +31,31 @@ const Contributors = () => {
         have contributed so far!
       </p>
 
-      <Flex flexWrap="wrap">
+      <Flex className="flex-wrap">
         {contributorsList.map((contributor) => (
           <LinkBox
-            key={contributor.login}
             as="div"
-            maxWidth="132px"
-            margin="2"
-            boxShadow="0px 14px 66px rgba(0, 0, 0, 0.07), 0px 10px 17px rgba(0, 0, 0, 0.03), 0px 4px 7px rgba(0, 0, 0, 0.05)"
-            _hover={{
-              textDecoration: "none",
-              borderRadius: "base",
-              boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
-              background: "tableBackgroundHover",
-              transition: "transform 0.1s",
-              transform: "scale(1.02)",
-            }}
-            _focus={{
-              textDecoration: "none",
-              borderRadius: "base",
-              boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
-              background: "tableBackgroundHover",
-              transition: "transform 0.1s",
-              transform: "scale(1.02)",
-            }}
+            className="m-2 max-w-[132px] transform shadow-table transition-transform duration-100 hover:scale-[1.02] hover:rounded hover:bg-background-table-hover hover:no-underline hover:shadow-table-box-hover focus:scale-[1.02] focus:rounded focus:no-underline focus:shadow-table-box-hover"
+            key={contributor.login}
           >
-            <Image
-              width="132px"
-              height="132px"
+            <img
+              className="h-[132px] w-[132px]"
               src={contributor.avatar_url}
               alt={contributor.name}
             />
-            <Box padding="1rem">
-              <Text as="h3" fontSize="md" marginTop="2" marginBottom="4">
-                <LinkOverlay
-                  as={InlineLink}
-                  href={contributor.profile}
-                  hideArrow
-                  color="text"
-                  textDecoration="none"
-                  _hover={{ textDecoration: "none" }}
-                  isExternal
-                >
-                  {contributor.name}
+            <div className="p-4">
+              <h3 className="mb-4 mt-2 text-md">
+                <LinkOverlay asChild>
+                  <InlineLink
+                    className="text-body no-underline hover:no-underline"
+                    href={contributor.profile}
+                    hideArrow
+                  >
+                    {contributor.name}
+                  </InlineLink>
                 </LinkOverlay>
-              </Text>
-            </Box>
+              </h3>
+            </div>
           </LinkBox>
         ))}
       </Flex>

src/components/ui/link-box.tsx

@@ -0,0 +1,50 @@
+import {
+  type BaseHTMLAttributes,
+  type ElementRef,
+  type ElementType,
+  forwardRef,
+} from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@/lib/utils/cn"
+
+type LinkBoxElement = ElementRef<"div">
+
+type LinkBoxProps = BaseHTMLAttributes<HTMLDivElement> & { as?: ElementType }
+
+const LinkBox = forwardRef<LinkBoxElement, LinkBoxProps>(
+  ({ as: Comp = "div", className, ...props }, ref) => {
+    return (
+      <Comp ref={ref} className={cn("relative z-10", className)} {...props} />
+    )
+  }
+)
+
+LinkBox.displayName = "LinkBox"
+
+type LinkOverlayElement = ElementRef<"a">
+
+type LinkOverlayProps = BaseHTMLAttributes<HTMLAnchorElement> & {
+  asChild?: boolean
+}
+
+const LinkOverlay = forwardRef<LinkOverlayElement, LinkOverlayProps>(
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a"
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          "before:absolute before:left-0 before:top-0 before:z-0 before:block before:h-full before:w-full before:cursor-pointer before:content-['']",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+LinkOverlay.displayName = "LinkOverlay"
+
+export { LinkBox, LinkOverlay }

src/styles/global.css

@@ -43,6 +43,8 @@
       rgba(145, 234, 228, 0.2) 100%
     );
     --search-background: var(--background);
+    /* cant find new equivalent */
+    --table-background-hover: #f2f2f2; 
   }
 
   [data-theme="dark"] {
@@ -71,6 +73,8 @@
       rgba(134, 253, 232, 0.08) 100%
     );
     --search-background: #4c4c4c;
+    /* cant find new equivalent */
+    --table-background-hover: rgba(255,115,36,.013);
   }
 }
 

tailwind.config.ts

@@ -152,6 +152,9 @@ const config = {
           low: "hsla(var(--background-low))",
           medium: "hsla(var(--background-medium))",
           high: "hsla(var(--background-high))",
+          table: {
+            hover: "var(--table-background-hover)",
+          },
         },
 
         border: {