🚚 Make label badge its own component

src/components/SitesTable.tsx

@@ -57,11 +57,12 @@ import {
     type ExtendedColumnDef
 } from "./ui/controlled-data-table";
 
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { cn } from "@app/lib/cn";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { LabelBadge } from "./label-badge";
 import { LabelsSelector, type SelectedLabel } from "./labels-selector";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { tierMatrix } from "@server/lib/billing/tierMatrix";
 
 export type SiteRow = {
     id: number;
@@ -720,27 +721,11 @@ function SiteLabelCell({ site, orgId }: SiteLabelCellProps) {
     return (
         <div className="inline-flex flex-wrap items-center justify-end w-full gap-1">
             {optimisticLabels.slice(0, 3).map((label) => (
-                <Button
+                <LabelBadge
                     key={label.labelId}
-                    variant="outline"
                     onClick={() => setIsPopoverOpen(true)}
-                    className={cn(
+                    {...label}
-                        "inline-flex gap-1 items-center",
+                />
-                        "rounded-full text-sm cursor-pointer",
-                        "pl-1.5 pr-2 py-0 h-auto"
-                    )}
-                >
-                    <div
-                        className="size-3 rounded-full bg-(--color) flex-none"
-                        style={{
-                            // @ts-expect-error css color
-                            "--color": label.color
-                        }}
-                    />
-                    <span className="whitespace-nowrap text-ellipsis max-w-16 overflow-hidden relative">
-                        {label.name}
-                    </span>
-                </Button>
             ))}
             {optimisticLabels.length > 3 && (
                 <Button

src/components/label-badge.tsx

@@ -0,0 +1,40 @@
+import { cn } from "@app/lib/cn";
+import { Button } from "./ui/button";
+
+export type LabelBadgeProps = {
+    name: string;
+    color: string;
+    onClick?: () => void;
+    className?: string;
+};
+
+export function LabelBadge({
+    onClick,
+    name,
+    color,
+    className
+}: LabelBadgeProps) {
+    return (
+        <Button
+            variant="outline"
+            onClick={onClick}
+            className={cn(
+                "inline-flex gap-1 items-center",
+                "rounded-full text-sm cursor-pointer",
+                "pl-1.5 pr-2 py-0 h-auto",
+                className
+            )}
+        >
+            <div
+                className="size-3 rounded-full bg-(--color) flex-none"
+                style={{
+                    // @ts-expect-error css color
+                    "--color": color
+                }}
+            />
+            <span className="whitespace-nowrap text-ellipsis max-w-16 overflow-hidden relative">
+                {name}
+            </span>
+        </Button>
+    );
+}