🚧 add labels button

messages/en-US.json

@@ -1124,6 +1124,8 @@
     "idpErrorConnectingTo": "There was a problem connecting to {name}. Please contact your administrator.",
     "idpErrorNotFound": "IdP not found",
     "inviteInvalid": "Invalid Invite",
+    "labels": "Labels",
+    "addLabelsButtonText": "Add labels",
     "inviteInvalidDescription": "The invite link is invalid.",
     "inviteErrorWrongUser": "Invite is not for this user",
     "inviteErrorUserNotExists": "User does not exist. Please create an account first.",

src/components/SitesTable.tsx

@@ -26,7 +26,8 @@ import {
     ArrowUpRight,
     ChevronDown,
     ChevronsUpDownIcon,
-    MoreHorizontal
+    MoreHorizontal,
+    PlusIcon
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
@@ -437,7 +438,7 @@ export default function SitesTable({
             header: () => {
                 return <span className="p-3">{t("address")}</span>;
             },
-            cell: ({ row }: { row: any }) => {
+            cell: ({ row }) => {
                 const originalRow = row.original;
                 return originalRow.address ? (
                     <div className="flex items-center space-x-2">
@@ -448,6 +449,22 @@ export default function SitesTable({
                 );
             }
         },
+        {
+            accessorKey: "labels",
+            header: () => <span className="p-3">{t("labels")}</span>,
+            cell: ({ row }) => {
+                return (
+                    <Button
+                        className="rounded-full inline-flex gap-1 items-center py-0.5"
+                        size="sm"
+                        variant="outline"
+                    >
+                        <PlusIcon className="size-4 flex-none" />{" "}
+                        <span>{t("addLabelsButtonText")}</span>
+                    </Button>
+                );
+            }
+        },
         {
             id: "actions",
             enableHiding: false,
@@ -622,7 +639,8 @@ export default function SitesTable({
                     niceId: false,
                     nice: false,
                     exitNode: false,
-                    address: false
+                    address: false,
+                    labels: false
                 }}
                 enableColumnVisibility
                 stickyLeftColumn="name"