chore(web): Add SubTabButtonList component

web/src/beta/components/SubTabButtonList/index.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import SubTabButtonList from ".";
+
+const meta: Meta<typeof SubTabButtonList> = {
+  component: SubTabButtonList,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SubTabButtonList>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { id: "1", name: "GIS", active: true },
+      { id: "2", name: "Story", active: true },
+      { id: "3", name: "Web AR", active: false },
+    ],
+  },
+};

web/src/beta/components/SubTabButtonList/index.tsx

@@ -0,0 +1,53 @@
+import type { FC } from "react";
+
+import { styled, useTheme, PublishTheme } from "@reearth/services/theme";
+
+import useManageSwitchState, { SwitchField } from "../../hooks/useManageSwitchState/hooks";
+import Text from "../Text";
+
+type CustomField = {
+  name: string;
+};
+type SwitchCustomField = SwitchField<CustomField>;
+
+export type Props = {
+  publishedTheme?: PublishTheme;
+  items: SwitchCustomField[];
+  onChange?: (id: string) => void;
+};
+const SubTabButtonList: FC<Props> = ({ publishedTheme, items, onChange }) => {
+  const theme = useTheme();
+  const { handleActivate, fields } = useManageSwitchState({ fields: items });
+  const handleClick = (id: string) => {
+    handleActivate(id);
+    onChange?.(id);
+  };
+  return (
+    <>
+      {fields.map((item, index) => (
+        <SubTabButton
+          key={index}
+          disabled={item.active || false}
+          onClick={() => handleClick(item.id)}>
+          <Text size="xs" color={publishedTheme?.mainText || theme.main.text}>
+            {item.name}
+          </Text>
+        </SubTabButton>
+      ))}
+    </>
+  );
+};
+
+const SubTabButton = styled.button<{ disabled: boolean }>`
+  background: ${({ disabled, theme }) => (disabled ? theme.main.select : "inherit")};
+  padding: 8px;
+  height: 32px;
+  border-radius: 4px 4px 0px 0px;
+  :hover {
+    background: ${({ theme }) => theme.main.select};
+    transition: all 0.5s ease;
+  }
+  text-align: center;
+`;
+
+export default SubTabButtonList;

web/src/beta/hooks/useManageSwitchState/hooks.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from "react";
 
-type SwitchField<T> = {
+export type SwitchField<T> = {
   id: string;
   active?: boolean;
 } & T;