From 61c93783dede1134fa65a4de88586f7a25692efe Mon Sep 17 00:00:00 2001
From: atnagata <114915037+atnagata@users.noreply.github.com>
Date: Wed, 28 Jun 2023 13:31:01 +0900
Subject: [PATCH] chore(web): Add SubTabButtonList component (#509)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 長田淳史 <>
Co-authored-by: koji endo <kouendou@fab.pasona.tech>
Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
---
 .../SubTabButtonList/index.stories.tsx        | 21 ++++++++++
 .../components/SubTabButtonList/index.tsx     | 41 +++++++++++++++++++
 .../beta/hooks/useManageSwitchState/hooks.tsx |  2 +-
 3 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 web/src/beta/components/SubTabButtonList/index.stories.tsx
 create mode 100644 web/src/beta/components/SubTabButtonList/index.tsx

diff --git a/web/src/beta/components/SubTabButtonList/index.stories.tsx b/web/src/beta/components/SubTabButtonList/index.stories.tsx
new file mode 100644
index 0000000000..2a0aef0aad
--- /dev/null
+++ b/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 },
+    ],
+  },
+};
diff --git a/web/src/beta/components/SubTabButtonList/index.tsx b/web/src/beta/components/SubTabButtonList/index.tsx
new file mode 100644
index 0000000000..5bc6646f0a
--- /dev/null
+++ b/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;
diff --git a/web/src/beta/hooks/useManageSwitchState/hooks.tsx b/web/src/beta/hooks/useManageSwitchState/hooks.tsx
index 70157371fc..2bca5b3a25 100644
--- a/web/src/beta/hooks/useManageSwitchState/hooks.tsx
+++ b/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;