feat: add TabBar component (#46)

app/components/TabBar.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { createRemixStub } from "@remix-run/testing";
+import { TabBar } from "./TabBar";
+
+const meta: Meta<typeof TabBar> = {
+	title: "Components/TabBar",
+	component: TabBar,
+	argTypes: {
+		path: {
+			control: "radio",
+			options: ["/clothes", "/hair", "/hairColor"],
+		},
+	},
+	decorators: [
+		(Story) => {
+			const RemixStub = createRemixStub([
+				{
+					path: "*",
+					Component: Story,
+				},
+			]);
+
+			return <RemixStub />;
+		},
+	],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof TabBar> = {
+	args: {
+		path: "/clothes",
+	},
+};

app/components/TabBar.tsx

@@ -0,0 +1,51 @@
+import * as Tabs from "@radix-ui/react-tabs";
+import { cn } from "~/libs/utils";
+
+const LINKS = [
+	{
+		href: "/clothes",
+		label: "服装",
+	},
+	{
+		href: "/hair",
+		label: "髪型",
+	},
+	{
+		href: "/hairColor",
+		label: "髪色",
+	},
+];
+
+export interface TabBarProps {
+	path: string;
+	className?: string;
+}
+
+export function TabBar({ path, className }: TabBarProps) {
+	const index = LINKS.findIndex((link) => link.href === path);
+
+	return (
+		<Tabs.Root
+			value={LINKS[index].href}
+			className={cn(
+				"relative w-full max-w-screen-sm overflow-hidden rounded-t-lg bg-gray-600",
+				className,
+			)}
+		>
+			<Tabs.List className="flex">
+				{LINKS.map((link) => (
+					<Tabs.Trigger
+						key={link.href}
+						value={link.href}
+						className={cn(
+							"flex-1 rounded-t-lg py-3 text-center text-white md:text-xl",
+							{ "bg-cyan-400": link.href === path },
+						)}
+					>
+						{link.label}
+					</Tabs.Trigger>
+				))}
+			</Tabs.List>
+		</Tabs.Root>
+	);
+}

package.json

@@ -20,6 +20,7 @@
 		"@builder.io/partytown": "0.10.2",
 		"@radix-ui/react-navigation-menu": "1.2.1",
 		"@radix-ui/react-slot": "1.1.0",
+		"@radix-ui/react-tabs": "1.1.1",
 		"@react-three/drei": "9.114.6",
 		"@react-three/fiber": "8.17.10",
 		"@remix-run/react": "2.13.1",