chore(web): add story page indicator (#543)

web/src/beta/features/Editor/Tabs/Storytelling/StoryPageIndicator/index.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import StoryPageIndicator from ".";
+
+const meta: Meta<typeof StoryPageIndicator> = {
+  component: StoryPageIndicator,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StoryPageIndicator>;
+
+export const Default: Story = {
+  args: {
+    currentPage: 3,
+    currentPageProgress: 33,
+    maxPage: 5,
+  },
+};

web/src/beta/features/Editor/Tabs/Storytelling/StoryPageIndicator/index.tsx

@@ -0,0 +1,65 @@
+import { FC } from "react";
+
+import { styled } from "@reearth/services/theme";
+
+type Props = {
+  currentPage: number;
+  currentPageProgress: number;
+  maxPage: number;
+  onPageChange: (page: number) => void;
+};
+
+const StoryPageIndicator: FC<Props> = ({
+  currentPage,
+  currentPageProgress,
+  maxPage,
+  onPageChange,
+}) => {
+  return (
+    <Wrapper>
+      {[...Array(maxPage)].map((_, i) => {
+        const page = i + 1;
+        const isActive = currentPage >= page;
+        const isCurrentPage = page === currentPage;
+        const progress = isCurrentPage ? currentPageProgress : isActive ? 100 : 0;
+        return (
+          <Indicator key={i} progress={progress} type="button" onClick={() => onPageChange(page)} />
+        );
+      })}
+    </Wrapper>
+  );
+};
+
+export default StoryPageIndicator;
+
+const Wrapper = styled.div`
+  display: flex;
+`;
+
+// TODO: fix colors/transitions including hover
+const Indicator = styled.button<{ progress: number }>`
+  position: relative;
+  flex: 1;
+  height: 8px;
+  background-color: #c2deff;
+  transition: all 0.15s;
+
+  :hover {
+    opacity: 0.8;
+  }
+
+  :not(:first-child) {
+    border-left: 1px solid #ffffff;
+  }
+
+  :after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: ${({ progress }) => progress}%;
+    background-color: #3592ff;
+    transition: width 0.15s;
+  }
+`;

web/src/beta/features/Editor/Tabs/Storytelling/StoryPanel/index.tsx

@@ -1,18 +1,33 @@
 import { FC } from "react";
 
+import StoryPageIndicator from "@reearth/beta/features/Editor/Tabs/Storytelling/StoryPageIndicator";
 import { styled } from "@reearth/services/theme";
 
 type Props = {};
 
-const StoryPanel: FC<Props> = () => {
-  return <Wrapper>StoryPanel</Wrapper>;
+export const StoryPanel: FC<Props> = () => {
+  return (
+    <Wrapper>
+      <StoryPageIndicator
+        currentPage={3}
+        currentPageProgress={33}
+        maxPage={6}
+        onPageChange={page => console.log(page)}
+      />
+      <Content>
+        <div>StoryPanel</div>
+      </Content>
+    </Wrapper>
+  );
 };
 
 export default StoryPanel;
 
 const Wrapper = styled.div`
-  box-sizing: border-box;
   width: 462px;
-  padding: 10px 24px;
   background-color: #f1f1f1;
 `;
+
+const Content = styled.div`
+  padding: 10px 24px;
+`;