Chore(web): Add ImageBlock

web/src/beta/components/Blocks/ImageBlock/index.stories.tsx

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import ImageBlock from ".";
+
+export default {
+  component: ImageBlock,
+} as Meta;
+
+const Container: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <div style={{ width: "430px" }}>{children}</div>
+);
+
+type Story = StoryObj<typeof ImageBlock>;
+
+export const Default: Story = {
+  args: {
+    src: "http://placehold.it/430X260",
+  },
+  render: args => {
+    return (
+      <Container>
+        <ImageBlock {...args} />
+      </Container>
+    );
+  },
+};
+
+export const Blank: Story = {
+  args: {
+    src: "",
+  },
+  render: args => {
+    return (
+      <Container>
+        <ImageBlock {...args} />
+      </Container>
+    );
+  },
+};

web/src/beta/components/Blocks/ImageBlock/index.tsx

@@ -0,0 +1,43 @@
+import Icon from "@reearth/beta/components/Icon";
+import { styled } from "@reearth/services/theme";
+
+type Props = {
+  src: NonNullable<React.ImgHTMLAttributes<HTMLImageElement>["src"]>;
+  alt?: React.ImgHTMLAttributes<HTMLImageElement>["alt"];
+};
+
+const ImageBlock: React.FC<Props> = ({ src, alt }) => {
+  if (src) {
+    return (
+      <Wrapper>
+        <ImageBox src={src} alt={alt} />
+      </Wrapper>
+    );
+  }
+  return (
+    <BlankImageBox>
+      <Icon icon={"image"} color={"#2e2e2e"} size={32} />
+    </BlankImageBox>
+  );
+};
+
+const Wrapper = styled.div`
+  position: absolute;
+  width: inherit;
+`;
+
+const ImageBox = styled.img`
+  display: flex;
+  object-fit: cover;
+  width: 100%;
+`;
+
+const BlankImageBox = styled.div`
+  display: flex;
+  aspect-ratio: 43/26;
+  background: #f1f1f1;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default ImageBlock;

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

@@ -54,6 +54,9 @@ import TwoRectangle from "./Icons/two-rectangle.svg";
 // Plus
 import Plus from "./Icons/plus.svg";
 
+// Image
+import Image from "./Icons/image.svg";
+
 export default {
   file: File,
   dl: InfoTable,
@@ -87,4 +90,5 @@ export default {
   workspaceAdd: WorkspaceAdd,
   workspaces: Workspaces,
   checkmark: CheckMark,
+  image: Image,
 };