From 57c77e039d4b0c020dfc7fdb9b3b70e2ff7b73d1 Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Fri, 20 Jun 2025 09:49:59 +0100
Subject: [PATCH] feat(ui): add TagGroup component

Introduces a new `TagGroup` component for rendering grouped tags with optional inverted styling.
---
 .../src/components/v2/TagGroup/TagGroup.css   |  3 ++
 .../v2/TagGroup/TagGroup.stories.tsx          | 43 +++++++++++++++++++
 .../src/components/v2/TagGroup/TagGroup.tsx   | 21 +++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.css
 create mode 100644 pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.stories.tsx
 create mode 100644 pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.tsx

diff --git a/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.css b/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.css
new file mode 100644
index 000000000..59fef1eae
--- /dev/null
+++ b/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.css
@@ -0,0 +1,3 @@
+div.tag-group {
+  @apply flex flex-wrap gap-x-1.5 gap-y-2;
+}
diff --git a/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.stories.tsx b/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.stories.tsx
new file mode 100644
index 000000000..c0d660609
--- /dev/null
+++ b/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.stories.tsx
@@ -0,0 +1,43 @@
+import { TagGroup, TagGroupProps } from "@/src/components/v2/TagGroup/TagGroup";
+import { Meta, StoryObj } from "@kachurun/storybook-solid";
+
+const meta: Meta<TagGroupProps> = {
+  title: "Components/TagGroup",
+  component: TagGroup,
+  decorators: [
+    (Story: StoryObj) => (
+      /* for some reason w-x from tailwind was not working */
+      <div style="width: 196px">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<TagGroupProps>;
+
+export const Default: Story = {
+  args: {
+    labels: [
+      "Tag 1",
+      "Tag 2",
+      "Tag 3",
+      "Tag 4",
+      "Tag 5",
+      "Tag 6",
+      "Tag 7",
+      "Tag 8",
+      "Tag 9",
+      "Tag 10",
+    ],
+  },
+};
+
+export const Inverted: Story = {
+  args: {
+    ...Default.args,
+    inverted: true,
+  },
+};
diff --git a/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.tsx b/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.tsx
new file mode 100644
index 000000000..e118ecca4
--- /dev/null
+++ b/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.tsx
@@ -0,0 +1,21 @@
+import "./TagGroup.css";
+import cx from "classnames";
+import { For } from "solid-js";
+import { Tag } from "@/src/components/v2/Tag/Tag";
+
+export interface TagGroupProps {
+  labels: string[];
+  inverted?: boolean;
+}
+
+export const TagGroup = (props: TagGroupProps) => {
+  const inverted = () => props.inverted || false;
+
+  return (
+    <div class={cx("tag-group", { inverted: inverted() })}>
+      <For each={props.labels}>
+        {(label) => <Tag label={label} inverted={inverted()} />}
+      </For>
+    </div>
+  );
+};