Image Component

app/styles.css

@@ -4,3 +4,4 @@
 body {
   margin: 0;
 }
+

components/Image.tsx

@@ -0,0 +1,63 @@
+import { ComponentConfig } from '@measured/puck';
+import React, { CSSProperties, useState } from 'react';
+
+export interface ImageComponentProps {
+  src: string;
+  alt: string;
+  fallbackSrc: string;
+}
+
+const ImageComponent = ({
+    src,
+    alt,
+    fallbackSrc,
+} : ImageComponentProps) => {
+    const [currentSrc, setCurrentSrc] = useState<string>(src);
+
+    const handleError = () => {
+        if (fallbackSrc){
+            setCurrentSrc(fallbackSrc)
+        }
+    };
+
+    return (
+        <img
+        src={currentSrc}
+        alt={alt}
+        onError={handleError}
+        style={{  
+          display: "block",
+          margin: "0 auto",
+          width: "100%",
+          height: "auto",
+          maxWidth: "100%",
+        }}
+        />
+    );
+};
+
+export const imageConfig: ComponentConfig<ImageComponentProps> = {
+    render: ImageComponent,
+    fields: {
+      src: {
+        type: "text",
+        label: "Image Source",
+      },
+      alt: {
+        type: "text",
+        label: "Alt Text",
+      },
+      fallbackSrc: {
+        type: "text",
+        label: "Fallback Source",
+      },
+    },
+    defaultProps: {
+      src: "https://placehold.co/600x400",
+      alt: "Default Image",
+      fallbackSrc: "https://placehold.co/600x400?text=Fallback",
+    },
+  };
+
+
+export default ImageComponent

components/Text.tsx

@@ -1,5 +1,6 @@
 import { ComponentConfig } from "@measured/puck";
 import React from "react";
+import { Style } from "util";
 
 export type TextProps = {
   text: string;

config/page.config.ts

@@ -3,20 +3,23 @@ import { textConfig } from "@components/Text";
 import type { TextProps } from "@components/Text";
 import { heroConfig } from "@components/Hero";
 import type { HeroProps } from "@components/Hero";
+import { ImageComponentProps, imageConfig } from "@components/Image";
 import { verticalSpaceConfig } from "@components/VerticalSpace";
 import type { VerticalSpaceProps } from "@components/VerticalSpace";
 
 
 type Props = {
     Text: TextProps;
     Hero: HeroProps;
+    Image: ImageComponentProps
     VerticalSpace: VerticalSpaceProps;
 };
 
 export const config: Config<Props> = {
     components: {
         Text: textConfig,
         Hero: heroConfig,
+        Image: imageConfig,
         VerticalSpace: verticalSpaceConfig,
     },
 };

package.json

@@ -24,5 +24,6 @@
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.5.4"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }