diff --git a/app/sections/image-gallery/image.tsx b/app/sections/image-gallery/image.tsx index b4918f9..e2f46e6 100644 --- 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( (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 ( - ); - }, -); + ) + } +) -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"]] +}