chore(web): Add SwitchButtonList Component (#526)

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

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

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import SwitchButtonList from ".";
+
+export default {
+  component: SwitchButtonList,
+} as Meta;
+
+type Story = StoryObj<typeof SwitchButtonList>;
+
+export const Default: Story = {
+  args: {
+    list: [
+      { id: "1", text: "PC", active: true },
+      { id: "2", text: "Ipad", active: false },
+      { id: "3", text: "Phone", active: false },
+    ],
+  },
+};

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

@@ -0,0 +1,54 @@
+import Text from "@reearth/beta/components/Text";
+import { SwitchField } from "@reearth/beta/hooks/useManageSwitchState/hooks";
+import { styled, useTheme } from "@reearth/services/theme";
+
+type AdditionalField = {
+  text: string;
+};
+type SwitchAdditionalField = SwitchField<AdditionalField>;
+
+export type Props = {
+  list: SwitchAdditionalField[];
+  onChange?: (id: string) => void;
+};
+const SwitchButtonList: React.FC<Props> = ({ list, onChange }) => {
+  const theme = useTheme();
+  return (
+    <>
+      {list.map((item, index) => (
+        <SwitchButton
+          key={index}
+          disabled={!!item?.active}
+          onClick={() => onChange?.(item.id)}
+          first={index === 0}
+          end={index === list.length - 1}>
+          <Text
+            size="footnote"
+            color={item.active ? theme.general.content.strong : theme.general.content.main}>
+            {item.text}
+          </Text>
+        </SwitchButton>
+      ))}
+    </>
+  );
+};
+const SwitchButton = styled.button<{
+  disabled: boolean;
+  first: boolean;
+  end: boolean;
+}>`
+  background: ${props =>
+    props.disabled ? props.theme.general.select : props.theme.general.bg.strong};
+  padding: 8px;
+  height: 32px;
+  border-top-left-radius: ${props => (props.first ? "4px" : "0px")};
+  border-top-right-radius: ${props => (props.end ? "4px" : "0px")};
+  border-bottom-left-radius: ${props => (props.first ? "4px" : "0px")};
+  border-bottom-right-radius: ${props => (props.end ? "4px" : "0px")};
+  transition: all 0.5s ease;
+  :hover {
+    background: ${props => props.theme.general.select};
+  }
+`;
+
+export default SwitchButtonList;