feat(ui): add NavSection component

pkgs/clan-app/ui/src/components/NavSection/NavSection.module.css

@@ -0,0 +1,16 @@
+.navSection {
+  @apply w-full flex gap-2 items-center justify-between;
+  @apply rounded-md px-4 py-5 bg-def-2;
+
+  .meta {
+    @apply flex flex-col gap-2;
+  }
+
+  &:hover {
+    @apply bg-def-3 cursor-pointer;
+  }
+
+  &:active {
+    @apply bg-def-4;
+  }
+}

pkgs/clan-app/ui/src/components/NavSection/NavSection.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@kachurun/storybook-solid";
+import {
+  NavSection,
+  NavSectionProps,
+} from "@/src/components/NavSection/NavSection";
+
+const meta: Meta<NavSectionProps> = {
+  title: "Components/NavSection",
+  component: NavSection,
+  decorators: [
+    (Story: StoryObj) => (
+      <div class="w-96">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<NavSectionProps>;
+
+export const Default: Story = {
+  args: {
+    label: "My Clan",
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    ...Default.args,
+    description:
+      "This is my Clan. There are many Clans like it, but this one is mine",
+  },
+};

pkgs/clan-app/ui/src/components/NavSection/NavSection.tsx

@@ -0,0 +1,35 @@
+import cx from "classnames";
+import styles from "./NavSection.module.css";
+import { Button } from "@kobalte/core/button";
+import Icon from "../Icon/Icon";
+import { Typography } from "../Typography/Typography";
+import { Show } from "solid-js";
+
+export interface NavSectionProps {
+  label: string;
+  description?: string;
+  onClick: () => void;
+}
+
+export const NavSection = (props: NavSectionProps) => {
+  return (
+    <Button class={cx(styles.navSection)} onClick={props.onClick}>
+      <div class={cx(styles.meta)}>
+        <Typography hierarchy="label" size="default" weight="bold">
+          {props.label}
+        </Typography>
+        <Show when={props.description}>
+          <Typography
+            hierarchy="body"
+            size="s"
+            weight="normal"
+            color="secondary"
+          >
+            {props.description}
+          </Typography>
+        </Show>
+      </div>
+      <Icon icon="CaretRight" />
+    </Button>
+  );
+};