Chore(web): Add ImageBlock

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import ImageBlock from ".";
+
+export default {
+  component: ImageBlock,
+} as Meta;
+
+type Story = StoryObj<typeof ImageBlock>;
+
+export const Default: Story = {
+  args: {
+    src: "http://placehold.it/150X150",
+  },
+};

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

@@ -0,0 +1,49 @@
+import { CSSProperties, FC, ImgHTMLAttributes } from "react";
+
+import { styled } from "@reearth/services/theme";
+
+type Props = {
+  src: NonNullable<ImgHTMLAttributes<HTMLImageElement>["src"]>;
+  align?: "left" | "center" | "right"; // default center
+  fit?: "contain" | "cover"; // default cover
+  maxHeight?: CSSProperties["maxHeight"];
+  alt?: ImgHTMLAttributes<HTMLImageElement>["alt"];
+  height?: CSSProperties["width"];
+  width?: CSSProperties["height"];
+};
+
+const ImageBlock: FC<Props> = ({ src, align, fit, maxHeight, alt, width, height }) => {
+  return (
+    <Wrapper>
+      <ImageBox
+        src={src}
+        fit={fit}
+        alt={alt}
+        maxHeight={maxHeight}
+        width={width}
+        height={height}
+        align={align}
+      />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  position: absolute;
+  display: flex;
+`;
+
+const ImageBox = styled.img<{
+  fit?: "contain" | "cover";
+  maxHeight?: CSSProperties["maxHeight"];
+  align?: "left" | "center" | "right";
+}>`
+  display: flex;
+  object-fit: ${props => (props.fit ? props.fit : "cover")};
+  width: ${props => (props.width ? props.width : undefined)};
+  height: ${props => (props.height ? props.height : undefined)};
+  max-height: ${props => (props.maxHeight ? props.maxHeight : undefined)};
+  object-position: ${props => (props.align ? props.align : "center")};
+`;
+
+export default ImageBlock;