Update image with text section

app/sections/ImageWithText/Content.tsx

@@ -0,0 +1,71 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import { forwardRef, CSSProperties } from 'react';
+
+interface ContentItemsProps extends HydrogenComponentProps {
+  gap: number;
+}
+
+let ContentItems = forwardRef<HTMLDivElement, ContentItemsProps>((props, ref) => {
+  let { children, gap, ...rest } = props;
+  let style = {
+    gap: `${gap}px`,
+    textAlign: 'left',
+  } as CSSProperties;
+  return (
+    <div ref={ref} {...rest} className='w-1/2 flex flex-col justify-center gap-5 p-16 sm-max:w-full sm-max:pt-0 sm-max:px-0 sm-max:pb-10' style={style}>
+      {children}
+    </div>
+  );
+});
+
+export default ContentItems;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'content-items',
+  title: 'Content',
+  limit: 1,
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+  inspector: [
+    {
+      group: 'Content',
+      inputs: [
+        {
+          type: 'range',
+          name: 'gap',
+          label: 'Items gap',
+          configs: {
+            min: 0,
+            max: 40,
+            step: 4,
+            unit: 'px',
+          },
+          defaultValue: 20,
+        },
+      ],
+    },
+  ],
+  childTypes: ['subheading', 'heading', 'description', 'button'],
+  presets: {
+    children: [
+      {
+        type: 'subheading',
+        content: 'Subheading',
+      },
+      {
+        type: 'heading',
+        content: 'Heading for image',
+      },
+      {
+        type: 'description',
+        content: 'Pair large text with an image to tell a story.',
+      },
+      {
+        type: 'button',
+        content: 'Button section',
+      },
+    ],
+  },
+};

app/sections/ImageWithText/Image.tsx

@@ -0,0 +1,67 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+  WeaverseImage,
+} from '@weaverse/hydrogen';
+import { forwardRef } from 'react';
+import { Image } from '@shopify/hydrogen';
+import { IconImageBlank } from '~/components';
+
+interface ImageItemsProps extends HydrogenComponentProps {
+  image: WeaverseImage,
+  loading: HTMLImageElement['loading'];
+}
+
+let ImageItems = forwardRef<HTMLDivElement, ImageItemsProps>((props, ref) => {
+  let { image, loading, ...rest } = props;
+
+  return (
+    <div ref={ref} {...rest} className='w-1/2 flex flex-1 items-center justify-center sm-max:order-first sm-max:w-full sm-max:py-10 sm-max:pb-0 sm-max:justify-center'>
+      {image ? <Image data={image} loading={loading} sizes="auto" className='!w-1/2 !aspect-square sm-max:!w-full' /> :
+        <div className='flex justify-center items-center bg-gray-200 w-1/2 aspect-square'>
+          <IconImageBlank className='h-32 w-32 opacity-80' viewBox='0 0 100 100' />
+        </div>
+      }
+    </div>
+  );
+});
+
+export default ImageItems;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'image-items',
+  title: 'Image',
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+  limit: 1,
+  inspector: [
+    {
+      group: 'Image',
+      inputs: [
+        {
+          type: 'image',
+          name: 'image',
+          label: 'Image',
+        },
+        {
+          type: 'toggle-group',
+          name: 'loading',
+          label: 'Image loading',
+          defaultValue: 'eager',
+          configs: {
+            options: [
+              { label: 'Eager', value: 'eager', icon: 'Lightning' },
+              {
+                label: 'Lazy',
+                value: 'lazy',
+                icon: 'SpinnerGap',
+                weight: 'light',
+              },
+            ],
+          },
+          helpText:
+            'Learn more about <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" target="_blank" rel="noopener noreferrer">image loading strategies</a>.',
+        },
+      ],
+    },
+  ],
+};

app/sections/ImageWithText/ImageWithText.tsx

@@ -0,0 +1,93 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import type { CSSProperties } from 'react';
+import { forwardRef  } from 'react';
+import { clsx } from 'clsx';
+
+type AlignImage = 'left' | 'right';
+interface ImageWithTextProps extends HydrogenComponentProps {
+  sectionHeight: number;
+  backgroundColor: string;
+  imageAlignment?: AlignImage;
+}
+
+let AlignImageClasses: Record<AlignImage, string> = {
+  left: 'flex-row-reverse',
+  right: 'flex-row',
+};
+
+let ImageWithText = forwardRef<HTMLElement, ImageWithTextProps>((props, ref) => {
+  let { imageAlignment, sectionHeight, backgroundColor, children, ...rest } = props;
+  let styleSection: CSSProperties = {
+    '--section-height': `${sectionHeight}px`,
+    backgroundColor: backgroundColor,
+  } as CSSProperties;
+
+  return (
+    <section ref={ref} {...rest} style={styleSection} className='h-[var(--section-height)] sm-max:h-auto sm-max:overflow-hidden'>
+      <div className='h-full px-10 sm-max:px-6 sm-max:w-full'>
+        <div className={clsx('flex justify-center items-center gap-5 h-full w-full sm-max:flex-col', AlignImageClasses[imageAlignment!] )}>
+          {children}
+        </div>
+      </div>
+    </section>
+  );
+});
+
+export default ImageWithText;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'image-with-text',
+  title: 'Image with text',
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+  inspector: [
+    {
+      group: 'Image',
+      inputs: [
+        {
+          type: 'toggle-group',
+          label: 'Image alignment',
+          name: 'imageAlignment',
+          configs: {
+            options: [
+              { label: 'Left', value: 'left', icon: 'AlignLeft' },
+              { label: 'Right', value: 'right', icon: 'AlignRight' },
+            ],
+          },
+          defaultValue: 'left',
+        },
+        {
+          type: 'range',
+          name: 'sectionHeight',
+          label: 'Section height',
+          defaultValue: 450,
+          configs: {
+            min: 400,
+            max: 700,
+            step: 10,
+            unit: 'px',
+          },
+        },
+        {
+          type: 'color',
+          name: 'backgroundColor',
+          label: 'Background color',
+          defaultValue: '#f4f4f4',
+        },
+      ],
+    },
+  ],
+  childTypes: ['content-items', 'image-items'],
+  presets: {
+    children: [
+      {
+        type: 'content-items',
+      },
+      {
+        type: 'image-items',
+      },
+    ],
+  },
+};