From 6e066d38b096236ebcab0a0631730fa6df147fe8 Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Mon, 11 May 2026 18:17:29 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A=20Make=20label=20badge=20its=20own?=
 =?UTF-8?q?=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SitesTable.tsx  | 27 +++++------------------
 src/components/label-badge.tsx | 40 ++++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 21 deletions(-)
 create mode 100644 src/components/label-badge.tsx

diff --git a/src/components/SitesTable.tsx b/src/components/SitesTable.tsx
index 2dd793841..b8064c933 100644
--- a/src/components/SitesTable.tsx
+++ b/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(
-                        "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>
+                    {...label}
+                />
             ))}
             {optimisticLabels.length > 3 && (
                 <Button
diff --git a/src/components/label-badge.tsx b/src/components/label-badge.tsx
new file mode 100644
index 000000000..9d84cc350
--- /dev/null
+++ b/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>
+    );
+}