From d48d549c5265eb476c9a1cab894c3192803ea52a Mon Sep 17 00:00:00 2001
From: atnagata <114915037+atnagata@users.noreply.github.com>
Date: Wed, 28 Jun 2023 13:50:56 +0900
Subject: [PATCH] chore(web): add actionItem to beta (#497)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/ActionItem/index.stories.tsx   | 16 +++++++
 web/src/beta/components/ActionItem/index.tsx  | 47 +++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 web/src/beta/components/ActionItem/index.stories.tsx
 create mode 100644 web/src/beta/components/ActionItem/index.tsx

diff --git a/web/src/beta/components/ActionItem/index.stories.tsx b/web/src/beta/components/ActionItem/index.stories.tsx
new file mode 100644
index 0000000000..a1a837d4d9
--- /dev/null
+++ b/web/src/beta/components/ActionItem/index.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import ActionItem from ".";
+
+export default {
+  component: ActionItem,
+} as Meta;
+
+type Story = StoryObj<typeof ActionItem>;
+
+export const Default: Story = {
+  args: {
+    title: "New Page",
+    icon: "square",
+  },
+};
diff --git a/web/src/beta/components/ActionItem/index.tsx b/web/src/beta/components/ActionItem/index.tsx
new file mode 100644
index 0000000000..7bd2daceda
--- /dev/null
+++ b/web/src/beta/components/ActionItem/index.tsx
@@ -0,0 +1,47 @@
+import { FC } from "react";
+
+import { styled, useTheme } from "@reearth/services/theme";
+
+import Icon from "../Icon";
+import Text from "../Text";
+
+type Props = {
+  icon: string;
+  title: string;
+  onClick?: () => void;
+};
+
+const ActionItem: FC<Props> = ({ icon, title, onClick }) => {
+  const theme = useTheme();
+
+  return (
+    <Box onClick={onClick}>
+      <Icon icon={icon} size={8} />
+      <Text
+        size={"footnote"}
+        color={theme.general.content.main}
+        otherProperties={{ wordBreak: "break-all" }}>
+        {title}
+      </Text>
+    </Box>
+  );
+};
+
+const Box = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 12px;
+  gap: 8px;
+
+  min-height: 28px;
+
+  background: ${props => props.theme.general.bg.main};
+  :hover {
+    background: ${props => props.theme.general.bg.weak};
+  }
+  user-select: none;
+  cursor: pointer;
+`;
+
+export default ActionItem;