Chore(web): Add StorytellingPageSectionItem (#495)

Co-authored-by: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
Co-authored-by: JAESUNG_PARK <JAESUNG_PARK@tsyscom.co.jp>
Co-authored-by: 長田淳史 <>

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

@@ -46,6 +46,10 @@ import Logout from "./Icons/logout.svg";
 import WorkspaceAdd from "./Icons/workspaceAdd.svg";
 import Workspaces from "./Icons/workspaces.svg";
 
+// Square
+import Square from "./Icons/square.svg";
+import TwoRectangle from "./Icons/two-rectangle.svg";
+
 export default {
   file: File,
   dl: InfoTable,
@@ -68,7 +72,9 @@ export default {
   ellipse: Ellipse,
   playRight: PlayRight,
   playLeft: PlayLeft,
+  square: Square,
   timeline: Timeline,
+  twoRectangle: TwoRectangle,
   actionbutton: ActionButton,
   dashboard: Dashboard,
   help: Help,

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

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import StorytellingPageSectionItem from ".";
+
+export default {
+  component: StorytellingPageSectionItem,
+} as Meta;
+
+type Story = StoryObj<typeof StorytellingPageSectionItem>;
+
+export const Default: Story = {
+  args: {
+    icon: "square",
+    title: "New Page",
+    index: 1,
+    active: false,
+  },
+};
+
+export const LongText: Story = {
+  args: {
+    icon: "square",
+    title:
+      "gashjdjahasdasdasdasdasdjjashdjkashdjkahdjkhaskjdhasdasdasdasddfggjsdhasjkdhjkashdkjahskjdhakjshdkahskjdakjshdkjahsdkjhajksdhakjhsdkjhaksjhdakjhsdkjhakjsdhakjhsdkjsadasdasdahskdjhasdasdasdasdasdasdakjsdhksadasd",
+    index: 1,
+    active: false,
+  },
+};

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

@@ -0,0 +1,80 @@
+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;
+  index: number;
+  active?: boolean;
+  onAction?: () => void;
+  onClick?: () => void;
+};
+
+const StorytellingPageSectionItem: FC<Props> = ({
+  icon,
+  title,
+  index,
+  active,
+  onAction,
+  onClick,
+}) => {
+  const theme = useTheme();
+  return (
+    <HorizontalBox>
+      <VerticalBox>
+        <Text size={"body"}>{index}</Text>
+        <Icon icon={icon} />
+      </VerticalBox>
+      <TitleArea active={active}>
+        <Text
+          onClick={onClick}
+          size="footnote"
+          color={theme.general.content.strong}
+          otherProperties={{ wordBreak: "break-all" }}>
+          {title}
+        </Text>
+        <Wrapper>
+          <Icon icon="actionbutton" onClick={onAction} />
+        </Wrapper>
+      </TitleArea>
+    </HorizontalBox>
+  );
+};
+
+const HorizontalBox = styled.div`
+  display: flex;
+  min-height: 56px;
+  gap: 4px;
+  cursor: pointer;
+`;
+
+const VerticalBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const TitleArea = styled.div<{ active?: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  gap: 4px;
+
+  background: ${props => (props.active ? props.theme.general.select : props.theme.general.bg.main)};
+  border: 1px solid
+    ${props => (props.active ? props.theme.general.select : props.theme.general.bg.veryWeak)};
+  border-radius: 6px;
+
+  width: 100%;
+`;
+
+const Wrapper = styled.div`
+  height: 100%;
+`;
+
+export default StorytellingPageSectionItem;