feat(ui): add TagGroup component

Introduces a new `TagGroup` component for rendering grouped tags with optional inverted styling.

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;
+}

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,
+  },
+};

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>
+  );
+};