Add more sections/components

app/components/Icon.tsx

@@ -367,3 +367,11 @@ export function IconVideoBlank(props: IconProps) {
     </Icon>
   );
 }
+export function IconArrowInput(props: IconProps) {
+  return (
+    <Icon {...props} fill="transparent" stroke={props.stroke || 'currentColor'}>
+      <path d="M2.5 8H13.5" stroke="#0F0F0F" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M9 3.5L13.5 8L9 12.5" stroke="#0F0F0F" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </Icon>
+  );
+}

app/data/queries.ts

@@ -462,3 +462,16 @@ export let VARIANTS_QUERY = `#graphql
   }
   ${PRODUCT_VARIANT_FRAGMENT}
 ` as const;
+export let CUSTOMER_CREATE = `#graphql mutation customerCreate($input: CustomerCreateInput!) {
+  customerCreate(input: $input) {
+    customer {
+      id
+      email
+    }
+    customerUserErrors {
+      field
+      message
+      code
+    }
+  }
+}` as const;

app/sections/SlideShow/SlideItems.tsx

@@ -0,0 +1,136 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+  WeaverseImage,
+} from '@weaverse/hydrogen';
+import { forwardRef, CSSProperties } from 'react';
+import {Image} from '@shopify/hydrogen';
+import {IconImageBlank} from '~/components';
+import clsx from 'clsx';
+
+interface CountDownProps extends HydrogenComponentProps {
+  backgroundImage: WeaverseImage;
+  overlayColor: string;
+  overlayOpacity: number;
+  contentPosition: string;
+}
+
+let SlideShowItem = forwardRef<HTMLDivElement, CountDownProps>((props, ref) => {
+  let {
+    backgroundImage,
+    overlayColor,
+    overlayOpacity,
+    contentPosition,
+    children,
+    ...rest
+  } = props;
+
+  let positionClass: {[key: string]: string} = {
+    'top left': 'items-start justify-start',
+    'top right': 'items-start justify-end',
+    'top center': 'items-start justify-center',
+    'center left': 'items-center justify-start',
+    'center center': 'items-center justify-center',
+    'center right': 'items-center justify-end',
+    'bottom left': 'items-end justify-start',
+    'bottom center': 'items-end justify-center',
+    'bottom right': 'items-end justify-end',
+  };
+
+  let slideStyle: CSSProperties = {
+    '--overlay-color': overlayColor,
+    '--overlay-opacity': `${overlayOpacity}%`,
+  } as CSSProperties;
+
+  return (
+    <div ref={ref} {...rest} className={clsx('flex relative h-full px-10 py-16 w-full sm-max:px-4', positionClass[contentPosition])} style={slideStyle}>
+      <div className="absolute inset-0">
+        {backgroundImage ? (
+          <Image
+            data={backgroundImage}
+            sizes="auto"
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div className="w-full h-full flex justify-center items-center bg-gray-200">
+            <IconImageBlank
+              className="!w-24 !h-24 opacity-30"
+              viewBox="0 0 100 100"
+            />
+          </div>
+        )}
+        {backgroundImage && (
+          <div className="absolute inset-0 bg-[var(--overlay-color)] opacity-[var(--overlay-opacity)]"></div>
+        )}
+      </div>
+      <div className="flex flex-col gap-3 items-center w-5/6 sm-max:w-full z-10">
+        {children}
+      </div>
+    </div>
+
+  );
+});
+
+export default SlideShowItem;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'slide-show--item',
+  title: 'Slide',
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+  inspector: [
+    {
+      group: 'Slide',
+      inputs: [
+        {
+          type: 'image',
+          name: 'backgroundImage',
+          label: 'Background image',
+        },
+        {
+          type: 'position',
+          name: 'contentPosition',
+          label: 'Content position',
+          defaultValue: 'center center',
+        },
+        {
+          type: 'color',
+          name: 'overlayColor',
+          label: 'Overlay color',
+        },
+        {
+          type: 'range',
+          name: 'overlayOpacity',
+          label: 'Overlay opacity',
+          defaultValue: 50,
+          configs: {
+            min: 10,
+            max: 100,
+            step: 10,
+            unit: '%',
+          },
+        },
+      ],
+    },
+  ],
+  childTypes: ['subheading', 'heading', 'description', 'button'],
+  presets: {
+    children: [
+      {
+        type: 'subheading',
+        content: 'Subheading',
+      },
+      {
+        type: 'heading',
+        content: 'Slide Heading'
+      },
+      {
+        type: 'description',
+        content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown."
+      },
+      {
+        type: 'button',
+        content: 'Button section',
+      },
+    ],
+  },
+};

app/sections/SlideShow/SlideShow.tsx

@@ -0,0 +1,122 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import { forwardRef, CSSProperties, useState, useCallback, useEffect } from 'react';
+import { useKeenSlider } from 'keen-slider/react';
+import clsx from 'clsx';
+
+interface SlideShowProps extends HydrogenComponentProps {
+  sectionHeight: number;
+}
+
+let SlideShow = forwardRef<HTMLElement, SlideShowProps>((props, ref) => {
+  let {
+    sectionHeight,
+    children,
+    ...rest
+  } = props;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [sliderRef, instanceRef] = useKeenSlider({
+    loop: true,
+    slideChanged(slider) {
+      let pos = slider.track.details.rel;
+      setActiveIndex(pos);
+    },
+  });
+
+  let moveToIdx = useCallback(
+    (idx: number) => {
+      setActiveIndex(idx);
+      if (instanceRef.current) {
+        instanceRef.current.moveToIdx(idx);
+      }
+    },
+    [instanceRef],
+  );
+
+  let handleClickNavigation = (idx: number) => {
+    moveToIdx(idx);
+  };
+
+  let renderNavigation = () => {
+    if (children && children?.length > 1) {
+      return children?.map((child, index) => (
+        <span
+          key={index}
+          className={clsx('h-1 w-full cursor-pointer rounded-sm', index === activeIndex ? 'bg-gray-700' : 'bg-gray-300')}
+          onClick={() => handleClickNavigation(index)}
+        ></span>
+      ));
+    }
+    return null;
+  };
+
+  useEffect(() => {
+    if (instanceRef) {
+      instanceRef.current?.update();
+    }
+  }, [children, instanceRef]);
+
+  let sectionStyle: CSSProperties = {
+    '--section-height': `${sectionHeight}px`,
+  } as CSSProperties;
+
+  return (
+    <section
+      ref={ref}
+      {...rest}
+      className="h-[var(--section-height)] relative"
+      style={sectionStyle}
+    >
+      <div ref={sliderRef} className='keen-slider h-full'>
+        {children?.map((child, index) => (
+          <div
+            key={index}
+            className={clsx('keen-slider__slide')}
+          >
+            {child}
+          </div>
+        ))}
+      </div>
+      <div className='absolute bottom-7 left-1/2 w-1/3 transform -translate-x-1/2 flex gap-1'>
+          {renderNavigation()}
+      </div>
+    </section>
+  );
+});
+
+export default SlideShow;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'slide-show',
+  title: 'Slide show',
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+  inspector: [
+    {
+      group: 'SLideshow',
+      inputs: [
+        {
+          type: 'range',
+          name: 'sectionHeight',
+          label: 'Section height',
+          defaultValue: 500,
+          configs: {
+            min: 400,
+            max: 700,
+            step: 10,
+            unit: 'px',
+          },
+        },
+      ],
+    },
+  ],
+  childTypes: ['slide-show--item'],
+  presets: {
+    children: [
+      {
+        type: 'slide-show--item',
+      },
+    ],
+  },
+};

app/sections/image-hotspots/image-hotspot.tsx

@@ -0,0 +1,109 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+  WeaverseImage,
+} from '@weaverse/hydrogen';
+import { forwardRef } from 'react';
+import { Image } from '@shopify/hydrogen';
+import { CSSProperties } from 'react';
+import { IconImageBlank } from '~/components';
+
+
+interface ImageHotspotProps extends HydrogenComponentProps {
+  imageHostpots: WeaverseImage;
+  heading: string;
+  sectionHeight: number;
+  topPadding: number;
+  bottomPadding: number;
+}
+
+let ImageHotspot = forwardRef<HTMLElement, ImageHotspotProps>((props, ref) => {
+  let { imageHostpots, heading, children, sectionHeight, topPadding, bottomPadding, ...rest } = props;
+  let sectionStyles: CSSProperties = {
+    '--section-height': `${sectionHeight}px`,
+    paddingTop: `${topPadding}px`,
+    paddingBottom: `${bottomPadding}px`
+  } as CSSProperties;
+  return (
+    <section ref={ref} {...rest} className='flex flex-col gap-5 px-10 sm-max:px-6' style={sectionStyles}>
+      <h3>{heading}</h3>
+      <div className='relative w-full h-[var(--section-height)] sm-max:w-full'>
+        {imageHostpots ? <Image data={imageHostpots} className='w-full h-full object-cover' /> :
+          <div className='w-full h-full flex items-center justify-center bg-gray-200'>
+            <IconImageBlank className='!w-24 !h-24 opacity-20' viewBox='0 0 100 101' />
+          </div>}
+        {children}
+      </div>
+    </section>
+  );
+});
+
+export default ImageHotspot;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'image-hotspot',
+  title: 'Image hotspot',
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+  inspector: [
+    {
+      group: 'Image',
+      inputs: [
+        {
+          type: 'image',
+          name: 'imageHostpots',
+          label: 'Image hotspots',
+        },
+        {
+          type: 'text',
+          name: 'heading',
+          label: 'Heading',
+          defaultValue: 'Shop the look',
+        },
+        {
+          type: 'range',
+          name: 'sectionHeight',
+          label: 'Section height',
+          defaultValue: 400,
+          configs: {
+            min: 400,
+            max: 700,
+            step: 10,
+            unit: 'px',
+          },
+        },
+        {
+          type: 'range',
+          name: 'topPadding',
+          label: 'Top padding',
+          defaultValue: 10,
+          configs: {
+            min: 5,
+            max: 70,
+            step: 5,
+            unit: 'px',
+          },
+        },
+        {
+          type: 'range',
+          name: 'bottomPadding',
+          label: 'Bottom padding',
+          defaultValue: 10,
+          configs: {
+            min: 5,
+            max: 70,
+            step: 5,
+            unit: 'px',
+          },
+        },
+      ],
+    },
+  ],
+  childTypes: ['product-hotspot--items'],
+  presets: {
+    children: [
+      {
+        type: 'product-hotspot--items',
+      },
+    ],
+  },
+};