sync demo

app/sections/ColumnWithText/index.tsx

@@ -0,0 +1,126 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import type { CSSProperties } from 'react';
+import { forwardRef  } from 'react';
+
+interface ContentColumnWithImageProps extends HydrogenComponentProps {
+  heading: string;
+  textColor: string;
+  gap: number;
+  headingAlignment: string;
+  topPadding: number;
+  bottomPadding: number;
+}
+
+let ContentColumnWithImage = forwardRef<HTMLElement, ContentColumnWithImageProps>((props, ref) => {
+  let {heading, textColor, headingAlignment, gap, topPadding, bottomPadding, children, ...rest } = props;
+  let headingStyle: CSSProperties = {
+    justifyContent: `${headingAlignment}`,
+  } as CSSProperties;
+  let sectionStyle: CSSProperties = {
+    paddingTop: `${topPadding}px`,
+    paddingBottom: `${bottomPadding}px`,
+    '--text-color': `${textColor}`,
+    '--gap-item': `${gap}px`,
+  } as CSSProperties;
+
+  return (
+    <section ref={ref} {...rest} className='w-full h-full' style={sectionStyle}>
+      <div className='px-10 py-10 flex flex-col gap-5 sm-max:px-6'>
+        <div className='flex' style={headingStyle}>
+          <h3 className='text-[var(--text-color)] font-medium'>{heading}</h3>
+        </div>
+        <div className='flex flex-wrap gap-[var(--gap-item)] justify-center'>
+          {children}
+        </div>
+      </div>
+    </section>
+  );
+});
+
+export default ContentColumnWithImage;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'column-with-image',
+  title: 'Column with image',
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+  inspector: [
+    {
+      group: 'Content',
+      inputs: [
+        {
+          type: 'text',
+          name: 'heading',
+          label: 'Heading',
+          defaultValue: 'Heading for Image',
+          placeholder: 'Heading for Image section',
+        },
+        {
+          type: 'color',
+          name: 'textColor',
+          label: 'Text color',
+          defaultValue: '#000000',
+        },
+        {
+          type: 'toggle-group',
+          label: 'Heading alignment',
+          name: 'headingAlignment',
+          configs: {
+            options: [
+              { label: 'Left', value: 'flex-start' },
+              { label: 'Center', value: 'center' },
+              { label: 'Right', value: 'flex-end' },
+            ],
+          },
+          defaultValue: 'center',
+        },
+        {
+          type: 'range',
+          name: 'gap',
+          label: 'Gap',
+          defaultValue: 20,
+          configs: {
+            min: 10,
+            max: 50,
+            step: 1,
+            unit: 'px',
+          },
+        },
+        {
+          type: 'range',
+          name: 'topPadding',
+          label: 'Top padding',
+          defaultValue: 0,
+          configs: {
+            min: 0,
+            max: 100,
+            step: 5,
+            unit: 'px',
+          },
+        },
+        {
+          type: 'range',
+          name: 'bottomPadding',
+          label: 'Bottom padding',
+          defaultValue: 0,
+          configs: {
+            min: 0,
+            max: 100,
+            step: 5,
+            unit: 'px',
+          },
+        },
+      ],
+    },
+  ],
+  childTypes: ['column--item'],
+  presets: {
+    children: [
+      {
+        type: 'column--item',
+      },
+    ],
+  },
+};

app/sections/ColumnWithText/item.tsx

@@ -0,0 +1,162 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+  WeaverseImage,
+} from '@weaverse/hydrogen';
+import type { CSSProperties } from 'react';
+import { forwardRef  } from 'react';
+import { Image } from '@shopify/hydrogen';
+import clsx from 'clsx';
+import { IconImageBlank } from '~/components';
+
+interface ContentColumnItemProps extends HydrogenComponentProps {
+  imageSrc: WeaverseImage;
+  titleText: string;
+  contentAlignment: string;
+  descriptionText: string;
+  buttonLabel: string;
+  buttonLink: string;
+  openInNewTab: boolean;
+  buttonStyle: string;
+  hideOnMobile: boolean;
+}
+
+let ContentColumnItem = forwardRef<HTMLDivElement, ContentColumnItemProps>(
+  (props, ref) => {
+    let {
+      imageSrc,
+      titleText,
+      contentAlignment,
+      descriptionText,
+      buttonLabel,
+      buttonLink,
+      openInNewTab,
+      buttonStyle,
+      hideOnMobile,
+      ...rest
+    } = props;
+    let contentStyle: CSSProperties = {
+      textAlign: `${contentAlignment}`,
+    } as CSSProperties;
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className={clsx(
+          'flex flex-col items-center sm-max:w-full sm-max:pt-0',
+          hideOnMobile && 'hidden sm:block',
+        )}
+      >
+        <div className="h-64 w-64 border border-solid border-gray-500 rounded-md">
+          {imageSrc ? <Image data={imageSrc} sizes="auto" className="w-full h-full" /> :
+            <div className='w-full h-full bg-gray-200 flex justify-center items-center'>
+              <IconImageBlank viewBox='0 0 100 100' className='!w-24 !h-24 opacity-40' />
+            </div>}
+        </div>
+        <div className="text-center w-full sm-max:w-64" style={contentStyle}>
+          {titleText && (
+            <p className="text-[var(--text-color)] font-normal mt-4 text-sm">{titleText}</p>
+          )}
+          {descriptionText && (
+            <p
+              className="text-sm font-normal mt-2 text-[var(--text-color)]"
+            >{descriptionText}</p>
+          )}
+          {buttonLabel && (
+            <a
+              href={buttonLink}
+              target={openInNewTab ? '_blank' : ''}
+              className={clsx("px-4 py-3 mt-4 cursor-pointer rounded inline-block", buttonStyle)} rel="noreferrer"
+            >
+              {buttonLabel}
+            </a>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+export default ContentColumnItem;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'column--item',
+  title: 'Column item',
+  inspector: [
+    {
+      group: 'Column',
+      inputs: [
+        {
+          type: 'image',
+          name: 'imageSrc',
+          label: 'Image',
+        },
+        {
+          type: 'text',
+          name: 'titleText',
+          label: 'Title',
+          placeholder: 'Item title',
+          defaultValue: 'Item title',
+        },
+        {
+          type: 'toggle-group',
+          label: 'Content alignment',
+          name: 'contentAlignment',
+          configs: {
+            options: [
+              { label: 'Left', value: 'left' },
+              { label: 'Center', value: 'center' },
+              { label: 'Right', value: 'right' },
+            ],
+          },
+          defaultValue: 'center',
+        },
+        {
+          type: 'textarea',
+          label: 'Text',
+          name: 'descriptionText',
+          placeholder: 'Brief description',
+          defaultValue: 'Brief description',
+        },
+        {
+          type: 'text',
+          label: 'Button label',
+          name: 'buttonLabel',
+          placeholder: 'Button label',
+          defaultValue: 'Optional button',
+        },
+        {
+          type: 'text',
+          label: 'Button link',
+          name: 'buttonLink',
+          placeholder: 'Button link',
+        },
+        {
+          type: 'switch',
+          name: 'openInNewTab',
+          label: 'Open in new tab',
+          defaultValue: true,
+        },
+        {
+          type: 'toggle-group',
+          label: 'Button style',
+          name: 'buttonStyle',
+          configs: {
+            options: [
+              { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' },
+              { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' },
+              { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' },
+            ],
+          },
+          defaultValue: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white',
+        },
+        {
+          type: 'switch',
+          label: 'Hide on Mobile',
+          name: 'hideOnMobile',
+          defaultValue: false,
+        },
+      ],
+    },
+  ],
+};

app/sections/CountDown/ButtonItems.tsx

@@ -0,0 +1,60 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import { forwardRef, CSSProperties } from 'react';
+
+interface ButtonItemsProps extends HydrogenComponentProps {
+  gap: number;
+}
+
+let ButtonItems = forwardRef<HTMLDivElement, ButtonItemsProps>((props, ref) => {
+  let { gap, children, ...rest } = props;
+  let spacingStyle: CSSProperties = {
+    gap: `${gap}px`,
+  } as CSSProperties;
+  return (
+    <div ref={ref} {...rest} className='flex mt-3' style={spacingStyle}>
+      {children}
+    </div>
+  );
+});
+
+export default ButtonItems;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'countdown-buttons',
+  title: 'Buttons',
+  inspector: [
+    {
+      group: 'Buttons',
+      inputs: [
+        {
+          type: 'range',
+          name: 'gap',
+          label: 'Gap',
+          defaultValue: 12,
+          configs: {
+            min: 10,
+            max: 30,
+            step: 1,
+            unit: 'px',
+          },
+        },
+      ],
+    },
+  ],
+  childTypes: ['button'],
+  presets: {
+    children: [
+      {
+        type: 'button',
+        content: 'Button',
+      },
+      {
+        type: 'button',
+        content: 'Button',
+      }
+    ],
+  },
+};