Chore(web): Add InsertionButton (#496)

Co-authored-by: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com> Co-authored-by: JAESUNG_PARK <JAESUNG_PARK@tsyscom.co.jp> Co-authored-by: 長田淳史 <> Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
reearth · Jun 28, 2023 · b55cc94 · b55cc94
1 parent d342489
commit b55cc94
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 0 deletions.
diff --git a/web/src/beta/components/Icon/Icons/plus.svg b/web/src/beta/components/Icon/Icons/plus.svg
diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts
@@ -51,6 +51,9 @@ import Workspaces from "./Icons/workspaces.svg";
 import Square from "./Icons/square.svg";
 import TwoRectangle from "./Icons/two-rectangle.svg";
 
+// Plus
+import Plus from "./Icons/plus.svg";
+
 export default {
   file: File,
   dl: InfoTable,
@@ -74,6 +77,7 @@ export default {
   playRight: PlayRight,
   playLeft: PlayLeft,
   square: Square,
+  plus: Plus,
   timeline: Timeline,
   twoRectangle: TwoRectangle,
   actionbutton: ActionButton,

diff --git a/web/src/beta/components/InsertionButton/index.stories.tsx b/web/src/beta/components/InsertionButton/index.stories.tsx
@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import InsertionButton from ".";
+
+export default {
+  component: InsertionButton,
+} as Meta;
+
+type Story = StoryObj<typeof InsertionButton>;
+
+export const Default: Story = {};
diff --git a/web/src/beta/components/InsertionButton/index.tsx b/web/src/beta/components/InsertionButton/index.tsx
@@ -0,0 +1,52 @@
+import Icon from "@reearth/beta/components/Icon";
+import { styled } from "@reearth/services/theme";
+
+type Props = {
+  onClick?: () => void;
+};
+
+const InsertionButton: React.FC<Props> = ({ onClick }) => {
+  return (
+    <Box onClick={onClick}>
+      <StyledIcon icon={"plus"} size={9.75} />
+      <Border />
+    </Box>
+  );
+};
+
+const Box = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 2px 0px;
+  gap: 4px;
+
+  border-radius: 6px;
+  opacity: 0;
+
+  :hover {
+    opacity: 1;
+    transition: all 0.5s ease;
+  }
+  :not(:hover) {
+    transition: all 0.5s ease;
+  }
+  cursor: pointer;
+`;
+
+const Border = styled.object`
+  height: 1px;
+  width: 100%;
+
+  background: ${props => props.theme.general.select};
+  border-radius: 1px;
+`;
+
+const StyledIcon = styled(Icon)`
+  background: ${props => props.theme.general.select};
+  border-radius: 50%;
+  padding: 2px;
+  color: ${props => props.theme.general.bg.transparent};
+`;
+
+export default InsertionButton;