refactor(link box): create custom linkbox and link-overlay components

Author: Baystef

src/components/Contributors.tsx

@@ -3,6 +3,7 @@ import shuffle from "lodash/shuffle"
 
 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"
 
@@ -32,8 +33,9 @@ const Contributors = () => {
 
       <Flex className="flex-wrap">
         {contributorsList.map((contributor) => (
-          <Flex
-            className="relative z-10 m-2 max-w-[132px] transform flex-col 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"
+          <LinkBox
+            as="div"
+            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}
           >
             <img
@@ -43,16 +45,18 @@ const Contributors = () => {
             />
             <div className="p-4">
               <h3 className="mb-4 mt-2 text-md">
-                <InlineLink
-                  className="static flex-grow text-body no-underline before:absolute before:left-0 before:top-0 before:z-0 before:block before:h-full before:w-full before:cursor-pointer before:content-[''] hover:no-underline"
-                  href={contributor.profile}
-                  hideArrow
-                >
-                  {contributor.name}
-                </InlineLink>
+                <LinkOverlay asChild>
+                  <InlineLink
+                    className="text-body no-underline hover:no-underline"
+                    href={contributor.profile}
+                    hideArrow
+                  >
+                    {contributor.name}
+                  </InlineLink>
+                </LinkOverlay>
               </h3>
             </div>
-          </Flex>
+          </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 }