chore(web): Add SettingsButtons Component (#513)

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

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

@@ -39,6 +39,14 @@ import PlayRight from "./Icons/play-right.svg";
 import PlayLeft from "./Icons/play-left.svg";
 import Ellipse from "./Icons/ellipse.svg";
 
+// Storytelling blocks
+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";
@@ -81,6 +89,13 @@ export default {
   timeline: Timeline,
   twoRectangle: TwoRectangle,
   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={{ display: "flex" }}>{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,53 @@
+import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
+import { styled, useTheme } from "@reearth/services/theme";
+
+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>
+      <StyledMainIcon size={16} onClick={onBlock} icon={icon} />
+      <StyledText size={"xFootnote"} color={theme.general.content.strong} onClick={onBlock}>
+        {title}
+      </StyledText>
+      <StyledSubIcon size={12} icon={"editIcon"} onClick={onEdit} />
+      <StyledSubIcon size={12} icon={"settings"} onClick={onSetting} />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  height: 100%;
+  background: ${props => props.theme.general.select};
+`;
+
+const StyledText = styled(Text)`
+  padding: 0px 4px;
+  cursor: pointer;
+`;
+
+const StyledMainIcon = styled(Icon)`
+  padding: 2px;
+  cursor: pointer;
+`;
+
+const StyledSubIcon = styled(Icon)`
+  padding: 4px;
+  justify-items: center;
+  border-left: 0.5px solid ${props => props.theme.general.content.strong};
+  cursor: pointer;
+`;
+
+export default SettingsButtons;