chore(web): Add SubTabButtonList component (#509)

Co-authored-by: 長田淳史 <>
Co-authored-by: koji endo <[email protected]>
Co-authored-by: KaWaite <[email protected]>

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: false },
+      { id: "3", name: "Web AR", active: false },
+    ],
+  },
+};

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

@@ -0,0 +1,41 @@
+import Text from "@reearth/beta/components/Text";
+import { SwitchField } from "@reearth/beta/hooks/useManageSwitchState/hooks";
+import { styled, useTheme } from "@reearth/services/theme";
+
+type CustomField = {
+  name: string;
+};
+type SwitchCustomField = SwitchField<CustomField>;
+
+export type Props = {
+  items: SwitchCustomField[];
+  onChange?: (id: string) => void;
+};
+const SubTabButtonList: React.FC<Props> = ({ items, onChange }) => {
+  const theme = useTheme();
+  return (
+    <>
+      {items.map((item, index) => (
+        <SubTabButton key={index} disabled={!!item?.active} onClick={() => onChange?.(item.id)}>
+          <Text size="footnote" color={theme.general.content.main}>
+            {item.name}
+          </Text>
+        </SubTabButton>
+      ))}
+    </>
+  );
+};
+
+const SubTabButton = styled.button<{ disabled: boolean }>`
+  background: ${({ disabled, theme }) => (disabled ? theme.general.select : "inherit")};
+  padding: 8px;
+  height: 32px;
+  border-radius: 4px 4px 0px 0px;
+  transition: all 0.5s;
+  :hover {
+    background: ${({ theme }) => theme.general.select};
+  }
+  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;