From 30b9dc62c63eec23fb422a4d18656cc7614e599a Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Tue, 18 Feb 2025 20:59:48 -0500
Subject: [PATCH] refactor(link-box): use `asChild strategy for `LinkBox`
 component

---
 src/components/Contributors.tsx |  1 -
 src/components/ui/avatar.tsx    | 35 +++++++++++++++------------------
 src/components/ui/link-box.tsx  | 12 ++++-------
 3 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/components/Contributors.tsx b/src/components/Contributors.tsx
index b8212a4dddb..c9796afcc82 100644
--- a/src/components/Contributors.tsx
+++ b/src/components/Contributors.tsx
@@ -34,7 +34,6 @@ const Contributors = () => {
       <Flex className="flex-wrap">
         {contributorsList.map((contributor) => (
           <LinkBox
-            as="div"
             className="m-2 max-w-[132px] transform shadow transition-transform duration-100 hover:scale-[1.02] hover:rounded hover:bg-background-highlight focus:scale-[1.02] focus:rounded"
             key={contributor.login}
           >
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index 663200f5b0a..f8513a8b77d 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -151,25 +151,22 @@ const Avatar = React.forwardRef<
 
     const _ref = ref as React.ForwardedRef<HTMLDivElement>
     return (
-      <LinkBox
-        // !! Inconsistent strategy, using `as` prop instead of `asChild` bool
-        as={Center}
-        ref={_ref}
-        className={cn(_direction, "gap-x-1 gap-y-0")}
-      >
-        <LinkOverlay
-          asChild
-          className={cn(
-            "peer z-overlay inline-flex items-center gap-1 p-1",
-            size !== "md" ? "text-xs" : "text-sm"
-          )}
-        >
-          <BaseLink {...commonLinkProps}>{label}</BaseLink>
-        </LinkOverlay>
-        <AvatarBase size={size}>
-          <AvatarImage src={src} />
-          <AvatarFallback>{fallbackInitials}</AvatarFallback>
-        </AvatarBase>
+      <LinkBox ref={_ref} className={cn(_direction, "gap-x-1 gap-y-0")} asChild>
+        <Center>
+          <LinkOverlay
+            asChild
+            className={cn(
+              "peer z-overlay inline-flex items-center gap-1 p-1",
+              size !== "md" ? "text-xs" : "text-sm"
+            )}
+          >
+            <BaseLink {...commonLinkProps}>{label}</BaseLink>
+          </LinkOverlay>
+          <AvatarBase size={size}>
+            <AvatarImage src={src} />
+            <AvatarFallback>{fallbackInitials}</AvatarFallback>
+          </AvatarBase>
+        </Center>
       </LinkBox>
     )
   }
diff --git a/src/components/ui/link-box.tsx b/src/components/ui/link-box.tsx
index 4a1c184e2a2..aa0ea9828b1 100644
--- a/src/components/ui/link-box.tsx
+++ b/src/components/ui/link-box.tsx
@@ -1,19 +1,15 @@
-import {
-  type BaseHTMLAttributes,
-  type ElementRef,
-  type ElementType,
-  forwardRef,
-} from "react"
+import { type BaseHTMLAttributes, type ElementRef, 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 }
+type LinkBoxProps = BaseHTMLAttributes<HTMLDivElement> & { asChild?: boolean }
 
 const LinkBox = forwardRef<LinkBoxElement, LinkBoxProps>(
-  ({ as: Comp = "div", className, ...props }, ref) => {
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div"
     return (
       <Comp ref={ref} className={cn("relative z-10", className)} {...props} />
     )