fix: image placeholder

Weaverse · Sep 17, 2023 · dbad8ec · dbad8ec
1 parent 5dc529b
commit dbad8ec
Showing 1 changed file with 52 additions and 52 deletions.
diff --git a/app/sections/image-gallery/image.tsx b/app/sections/image-gallery/image.tsx
@@ -1,10 +1,10 @@
 import type {
   HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from '@weaverse/hydrogen';
-import clsx from 'clsx';
-import {forwardRef} from 'react';
-import {Image} from '@shopify/hydrogen';
+  HydrogenComponentSchema
+} from "@weaverse/hydrogen"
+import clsx from "clsx"
+import { forwardRef } from "react"
+import { Image } from "@shopify/hydrogen"
 
 interface ImageGalleryItemProps extends HydrogenComponentProps {
   // TODO: change src to imageData
@@ -19,58 +19,58 @@ interface ImageGalleryItemProps extends HydrogenComponentProps {
   hideOnMobile: boolean;
 }
 
-let columnSpanClasses: {[span: number]: string} = {
-  1: 'col-span-1',
-  2: 'col-span-2',
-  3: 'col-span-3',
-  4: 'col-span-4',
-};
+let columnSpanClasses: { [span: number]: string } = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4"
+}
 
-let radiusClasses: {[radius: string]: string} = {
-  0: '',
-  2: 'rounded-sm',
-  4: 'rounded',
-  6: 'rounded-md',
-  8: 'rounded-lg',
-};
+let radiusClasses: { [radius: string]: string } = {
+  0: "",
+  2: "rounded-sm",
+  4: "rounded",
+  6: "rounded-md",
+  8: "rounded-lg"
+}
 
 let ImageGalleryItem = forwardRef<HTMLImageElement, ImageGalleryItemProps>(
   (props, ref) => {
-    let {src, columnSpan, borderRadius, hideOnMobile, ...rest} = props;
-    let data = typeof src === 'object' ? src : {url: src, altText: src};
+    let { src, columnSpan, borderRadius, hideOnMobile, ...rest } = props
+    let data = typeof src === "object" ? src : { url: src, altText: src }
     return (
       <Image
         ref={ref}
         {...rest}
         className={clsx(
-          'h-72 object-cover object-center w-full',
+          "h-72 object-cover object-center w-full",
           columnSpanClasses[columnSpan],
           radiusClasses[borderRadius],
-          hideOnMobile && 'hidden sm:block',
+          hideOnMobile && "hidden sm:block"
         )}
         data={data}
         sizes={`(min-width: 45em) 50vw, 100vw`}
       />
-    );
-  },
-);
+    )
+  }
+)
 
-export default ImageGalleryItem;
+export default ImageGalleryItem
 
 export let schema: HydrogenComponentSchema = {
-  type: 'image-gallery--item',
-  title: 'Image',
+  type: "image-gallery--item",
+  title: "Image",
   inspector: [
     {
-      group: 'Image Gallery Item',
+      group: "Image Gallery Item",
       inputs: [
         {
-          type: 'image',
+          type: "image",
           // TODO: change src to imageData object
-          name: 'src',
-          label: 'Image',
+          name: "src",
+          label: "Image",
           defaultValue:
-            'https://images.placeholders.dev/?width=1000&height=1000&text=Pilot&bgColor=%23f4f4f5&textColor=%23a1a1aa',
+            "https://cdn.shopify.com/s/files/1/0728/0410/6547/files/pilot-image-placeholder.svg"
         },
         // {
         //   type: 'text',
@@ -79,36 +79,36 @@ export let schema: HydrogenComponentSchema = {
         //   defaultValue: 'Pilot Image',
         // },
         {
-          type: 'range',
-          label: 'Column Span',
-          name: 'columnSpan',
+          type: "range",
+          label: "Column Span",
+          name: "columnSpan",
           configs: {
             min: 1,
             max: 4,
-            step: 1,
+            step: 1
           },
-          defaultValue: 1,
+          defaultValue: 1
         },
         {
-          type: 'range',
-          label: 'Border Radius',
-          name: 'borderRadius',
+          type: "range",
+          label: "Border Radius",
+          name: "borderRadius",
           configs: {
             min: 0,
             max: 8,
             step: 2,
-            unit: 'px',
+            unit: "px"
           },
-          defaultValue: 8,
+          defaultValue: 8
         },
         {
-          type: 'switch',
-          label: 'Hide on Mobile',
-          name: 'hideOnMobile',
-          defaultValue: false,
-        },
-      ],
-    },
+          type: "switch",
+          label: "Hide on Mobile",
+          name: "hideOnMobile",
+          defaultValue: false
+        }
+      ]
+    }
   ],
-  toolbar: ['general-settings', ['duplicate', 'delete']],
-};
+  toolbar: ["general-settings", ["duplicate", "delete"]]
+}