chore(web): Add SettingsButtons Component

web/src/beta/components/Icon/icons.ts

@@ -37,6 +37,14 @@ import PlayRight from "./Icons/play-right.svg";
 import PlayLeft from "./Icons/play-left.svg";
 import Ellipse from "./Icons/ellipse.svg";
 
+// SettingsButton
+import Audio from "./Icons/audio.svg";
+import EditIcon from "./Icons/editIcon.svg";
+import Settings from "./Icons/settings.svg";
+import ButtonBlock from "./Icons/buttonBlock.svg";
+import Camera from "./Icons/camera.svg";
+import MdFile from "./Icons/mdFile.svg";
+import Clock from "./Icons/clock.svg";
 //Dashboard
 import Dashboard from "./Icons/dashboard.svg";
 import Logout from "./Icons/logout.svg";
@@ -68,6 +76,13 @@ export default {
   playLeft: PlayLeft,
   timeline: Timeline,
   actionbutton: ActionButton,
+  audio: Audio,
+  editIcon: EditIcon,
+  settings: Settings,
+  buttonBlock: ButtonBlock,
+  camera: Camera,
+  mdFile: MdFile,
+  clock: Clock,
   dashboard: Dashboard,
   help: Help,
   logout: Logout,

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

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React, { ReactNode } from "react";
+
+import SettingsButtons from ".";
+
+export default {
+  component: SettingsButtons,
+} as Meta;
+
+type Story = StoryObj<typeof SettingsButtons>;
+
+const Wrapper: React.FC<{ children: ReactNode }> = ({ children }) => (
+  <div style={{ width: "96px" }}>{children}</div>
+);
+
+export const Default: Story = {
+  args: {
+    title: "Audio",
+    icon: "audio",
+  },
+  render: args => {
+    return (
+      <Wrapper>
+        <SettingsButtons {...args} />
+      </Wrapper>
+    );
+  },
+};

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

@@ -0,0 +1,67 @@
+import React from "react";
+
+import { styled, useTheme } from "@reearth/services/theme";
+
+import Icon from "../Icon";
+import Text from "../Text";
+
+export interface Props {
+  title: string;
+  icon: string;
+  onBlock?: () => void;
+  onEdit?: () => void;
+  onSetting?: () => void;
+}
+
+const SettingsButtons: React.FC<Props> = ({ title, icon, onBlock, onEdit, onSetting }) => {
+  const theme = useTheme();
+
+  return (
+    <Wrapper>
+      <Icon
+        size={16}
+        style={{
+          padding: "2px",
+        }}
+        onClick={onBlock}
+        icon={icon}
+      />
+      <Text
+        size={"xFootnote"}
+        color={theme.general.content.strong}
+        otherProperties={{ padding: "0px 4px" }}
+        onClick={onBlock}>
+        {title}
+      </Text>
+      <Icon
+        size={12}
+        style={{
+          justifyItems: "center",
+          padding: "4px",
+          borderLeft: `0.5px solid ${theme.general.content.strong}`,
+        }}
+        icon={"editIcon"}
+        onClick={onEdit}
+      />
+      <Icon
+        size={12}
+        style={{
+          padding: "4px",
+          borderLeft: `0.5px solid ${theme.general.content.strong}`,
+        }}
+        icon={"settings"}
+        onClick={onSetting}
+      />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  height: 100%;
+  background: ${props => props.theme.general.select};
+`;
+
+export default SettingsButtons;