From cdebcb446520db141b7fc306200fb18dcf313658 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Thu, 25 Jul 2024 16:57:55 +0700
Subject: [PATCH 01/17] chore: refactor animate scroll

---
 tailwind.config.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index ce24f7e..4e21db4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -74,11 +74,7 @@ module.exports = {
           from: {height: 'var(--radix-accordion-content-height)'},
           to: {height: '0'},
         },
-        'scrollText':{
-          '0%': { transform: 'translateX(0)' },
-          '100%': { transform: 'translateX(-100%)' },
-        },
-        'scrollImage':{
+        'scrollContent':{
           from: { transform: 'translateX(0)' },
           to: { transform: 'translateX(-100%)' },
         },
@@ -86,8 +82,7 @@ module.exports = {
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
-        'scrollText': 'scrollText linear infinite',
-        'scrollImage': 'scrollImage linear infinite',
+        'scrollContent': 'scrollContent linear infinite',
       },
     },
   },

From f40e8511803d963accabc9b078c54ecfef70bd34 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Thu, 25 Jul 2024 16:58:46 +0700
Subject: [PATCH 02/17] chore: update logic product swimlane

---
 app/components/ProductSwimlane.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/ProductSwimlane.tsx b/app/components/ProductSwimlane.tsx
index a1f5baf..0517d87 100644
--- a/app/components/ProductSwimlane.tsx
+++ b/app/components/ProductSwimlane.tsx
@@ -1,21 +1,21 @@
-import type {HomepageFeaturedProductsQuery} from 'storefrontapi.generated';
+import type {FeaturedItemsQuery} from 'storefrontapi.generated';
 import { Section} from '~/components/Text';
 import {ProductCard} from '~/components/ProductCard';
 import { IconArrowScrollLeft, IconArrowScrollRight } from './Icon';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 const mockProducts = {
   nodes: new Array(12).fill(''),
 };
 
-type ProductSwimlaneProps = HomepageFeaturedProductsQuery & {
+type ProductSwimlaneProps = Pick<FeaturedItemsQuery, 'featuredProducts'> & {
   title?: string;
   count?: number;
 };
 
 export function ProductSwimlane({
   title = 'Featured Products',
-  products = mockProducts,
+  featuredProducts = mockProducts,
   count = 12,
   ...props
 }: ProductSwimlaneProps) {
@@ -35,7 +35,7 @@ export function ProductSwimlane({
   return (
     <Section heading={title} padding="y" {...props} className='relative group'>
       <div ref={swimlaneRef} className="swimlane hiddenScroll scroll-px-0 px-0">
-        {products.nodes.slice(0, count).map((product) => (
+        {featuredProducts.nodes.slice(0, count).map((product) => (
           <ProductCard
             product={product}
             key={product.id}

From 06043ec9eb31b7150827b1c6a8a621d2d691c8d2 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Thu, 25 Jul 2024 16:59:52 +0700
Subject: [PATCH 03/17] chore: update layout container

---
 app/routes/($locale).search.tsx           | 2 +-
 app/sections/collection-filters/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/routes/($locale).search.tsx b/app/routes/($locale).search.tsx
index b315da3..71931aa 100644
--- a/app/routes/($locale).search.tsx
+++ b/app/routes/($locale).search.tsx
@@ -211,7 +211,7 @@ export default function Search() {
         productNumber={products.totalCount}
         filters={productfilters}
       />
-      <div className="px-4 lg:container md:px-6">
+      <div className="px-4 container md:px-6">
         {noResults ? (
           <NoResults
             noResults={noResults}
diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx
index 409667b..eda65de 100644
--- a/app/sections/collection-filters/index.tsx
+++ b/app/sections/collection-filters/index.tsx
@@ -44,7 +44,7 @@ let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
             appliedFilters={appliedFilters}
             collections={collections}
           />
-          <div className="px-4 md:px-6 lg:container">
+          <div className="px-4 md:px-6 container">
             <Pagination connection={collection.products}>
               {({
                 nodes,

From 65684298089adbe3edc558d1533ea9a97ba1f126 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Thu, 25 Jul 2024 17:00:51 +0700
Subject: [PATCH 04/17] chore: fix style drawer filter and quickview

---
 app/components/DrawerFilter.tsx | 2 +-
 app/components/QuickView.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/DrawerFilter.tsx b/app/components/DrawerFilter.tsx
index 5b4e319..5e29325 100644
--- a/app/components/DrawerFilter.tsx
+++ b/app/components/DrawerFilter.tsx
@@ -313,7 +313,7 @@ export default function SortMenu({
     items.find((item) => item.key === params.get('sort')) || items[0];
 
   return (
-    <Menu as="div" className="relative z-40">
+    <Menu as="div" className="relative z-30">
       <Menu.Button className="flex h-[50px] items-center gap-[10px] rounded border border-foreground px-4 py-3">
         <span className="font-heading text-xl font-medium">Sort by</span>
         <IconCaret />
diff --git a/app/components/QuickView.tsx b/app/components/QuickView.tsx
index ed30404..79ebf16 100644
--- a/app/components/QuickView.tsx
+++ b/app/components/QuickView.tsx
@@ -182,7 +182,7 @@ export function QuickViewTrigger(props: {productHandle: string}) {
   }, [quickAddOpen, data, load, state]);
   return (
     <>
-      <div className="mt-2 absolute bottom-4 hidden lg:group-hover:block py-5 px-3 w-full opacity-100 bg-[rgba(238,239,234,0.10)] backdrop-blur-2xl">
+      <div className="mt-2 absolute bottom-0 hidden lg:group-hover:block py-5 px-3 w-full opacity-100 bg-[rgba(238,239,234,0.10)] backdrop-blur-2xl">
         <Button
           onClick={(e) => {
             e.preventDefault();

From fb95054414f2d6ed2fb5c4b243c9f4f8a01576f1 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Thu, 25 Jul 2024 17:02:11 +0700
Subject: [PATCH 05/17] chore: refactor before and after section

---
 app/sections/before-and-after/index.tsx  | 63 +++---------------------
 app/sections/before-and-after/slider.tsx |  1 +
 2 files changed, 9 insertions(+), 55 deletions(-)

diff --git a/app/sections/before-and-after/index.tsx b/app/sections/before-and-after/index.tsx
index 9849252..9306c83 100644
--- a/app/sections/before-and-after/index.tsx
+++ b/app/sections/before-and-after/index.tsx
@@ -1,36 +1,20 @@
 import type {
-    HydrogenComponentProps,
     HydrogenComponentSchema,
 } from '@weaverse/hydrogen';
-import { forwardRef, CSSProperties } from 'react';
+import { forwardRef } from 'react';
+import { layoutInputs, Section, SectionProps } from '../atoms/Section';
 
-interface BeforeAndAfterProps extends HydrogenComponentProps {
-    backgroundColor: string;
-    topPadding: number;
-    bottomPadding: number;
-}
+type BeforeAndAfterProps = SectionProps;
 
 const BeforeAndAfter = forwardRef<HTMLElement, BeforeAndAfterProps>((props, ref) => {
     let {
-        backgroundColor,
-        topPadding,
-        bottomPadding,
         children,
         ...rest
     } = props;
-    let sectionStyle: CSSProperties = {
-        backgroundColor: backgroundColor,
-        '--top-padding-desktop': `${topPadding}px`,
-        '--bottom-padding-desktop': `${bottomPadding}px`,
-        '--top-padding-mobile': `${topPadding > 20 ? topPadding - 20 : topPadding}px`,
-        '--bottom-padding-mobile': `${bottomPadding > 20 ? bottomPadding - 20 : bottomPadding}px`,
-    } as CSSProperties;
     return (
-        <section ref={ref} {...rest} className='w-full h-full' style={sectionStyle}>
-            <div className='flex flex-col gap-12 pt-[var(--top-padding-mobile)] pb-[var(--bottom-padding-mobile)] sm:pt-[var(--top-padding-desktop)] sm:pb-[var(--bottom-padding-desktop)]'>
-                {children}
-            </div>
-        </section>
+        <Section ref={ref} {...rest}>
+            {children}
+        </Section>
     )
 });
 
@@ -42,39 +26,8 @@ export let schema: HydrogenComponentSchema = {
     toolbar: ['general-settings', ['duplicate', 'delete']],
     inspector: [
         {
-            group: 'Before & after slider',
-            inputs: [
-                {
-                    type: 'color',
-                    label: 'Background color',
-                    name: 'backgroundColor',
-                    defaultValue: '#F8F8F0',
-                },
-                {
-                    type: 'range',
-                    name: 'topPadding',
-                    label: 'Top padding',
-                    defaultValue: 80,
-                    configs: {
-                        min: 10,
-                        max: 100,
-                        step: 1,
-                        unit: 'px',
-                    },
-                },
-                {
-                    type: 'range',
-                    name: 'bottomPadding',
-                    label: 'Bottom padding',
-                    defaultValue: 80,
-                    configs: {
-                        min: 10,
-                        max: 100,
-                        step: 1,
-                        unit: 'px',
-                    },
-                },
-            ],
+            group: 'Layout',
+            inputs: layoutInputs.filter(({ name }) => name !== 'divider' && name !== 'borderRadius'),
         },
     ],
     childTypes: ['heading', 'before-after-slider'],
diff --git a/app/sections/before-and-after/slider.tsx b/app/sections/before-and-after/slider.tsx
index f428a57..0ded1f3 100644
--- a/app/sections/before-and-after/slider.tsx
+++ b/app/sections/before-and-after/slider.tsx
@@ -218,6 +218,7 @@ export default BeforeAndAfter;
 export let schema: HydrogenComponentSchema = {
     type: 'before-after-slider',
     title: 'Slider',
+    limit: 1,
     toolbar: ['general-settings', ['duplicate', 'delete']],
     inspector: [
         {

From ba1876b312b547515d86c8a9230a3bb0a6022e5c Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Thu, 25 Jul 2024 17:03:37 +0700
Subject: [PATCH 06/17] chore: refactor blogs section

---
 app/sections/blogs/index.tsx | 65 +++++++++---------------------------
 1 file changed, 15 insertions(+), 50 deletions(-)

diff --git a/app/sections/blogs/index.tsx b/app/sections/blogs/index.tsx
index 193c21e..ff3ecc9 100644
--- a/app/sections/blogs/index.tsx
+++ b/app/sections/blogs/index.tsx
@@ -39,57 +39,20 @@ const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
     ...rest
   } = props;
 
-  const blogItemBlank = () => {
-    return (
-      <div className="flex w-full cursor-pointer flex-col items-center gap-4 rounded p-0 transition-colors duration-500 group-hover:bg-background-subtle-1 sm:p-6">
-        <div className="flex aspect-square w-full items-center justify-center bg-background-subtle-1">
-          <IconImageBlank
-            viewBox="0 0 526 526"
-            className="h-full w-full opacity-80"
-          />
-        </div>
-        <div className="flex flex-col gap-4">
-          <h3 className="font-medium group-hover:underline">
-            Trendy items for this Winter Fall 2025 season
-          </h3>
-          <div className="w-full border-b-2 border-gray-300"></div>
-          <p className="line-clamp-3 font-normal">
-            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.
-          </p>
-        </div>
-      </div>
-    );
-  };
-
   let sectionStyle: CSSProperties = {
     '--background-color': backgroundColor,
   } as CSSProperties;
 
-  if (loaderData === undefined) {
-    return (
-      <section
-        ref={ref}
-        {...rest}
-        className="h-full w-full bg-[var(--background-color)]"
-        style={sectionStyle}
-      >
-        <div className="flex flex-col gap-6 px-4 py-12 sm:px-6 sm:py-20">
-          {children}
-          <div className="flex grid-cols-3 flex-col gap-5 sm:grid sm:gap-0 sm:justify-self-center">
-            {Array.from({length: 3}).map((idx, i) => (
-              <div key={i} className="group w-full">
-                {blogItemBlank()}
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-    );
-  }
+  const defaultArticles = Array.from({ length: 3 }).map((_, i) => ({
+    id: i,
+    title: 'Trendy items for this Winter Fall 2025 season',
+    excerpt: "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.",
+    image: null,
+    handle: null,
+  }));
 
-  let res = loaderData?.blog?.articles.nodes;
+  const res = loaderData?.blog?.articles.nodes ?? defaultArticles;
+  
   return (
     <section
       ref={ref}
@@ -105,10 +68,10 @@ const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
             articlesPerRowClasses[Math.min(articlePerRow, res?.length || 1)],
           )}
         >
-          {res?.map((idx: any, i: number) => (
+          {res?.map((idx, i) => (
             <Link
               key={i}
-              to={`/blogs/${blogs.handle}/${idx.handle}`}
+              to={idx.handle ? `/blogs/${blogs.handle}/${idx.handle}` : '#'}
               className={'group'}
             >
               <div
@@ -130,11 +93,13 @@ const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
                   </div>
                 )}
                 <div className="flex flex-col gap-4">
-                  <h3 className="group-hover:underline">{idx.title}</h3>
+                <h3 className="group-hover:underline">{idx.title}</h3>
                   {showSeperator && (
                     <div className="w-full border-b border-bar-subtle"></div>
                   )}
-                  <p className="line-clamp-3">{idx.excerpt}</p>
+                  <p className="line-clamp-3">
+                    {idx.excerpt}
+                  </p>
                 </div>
               </div>
             </Link>

From 39bb22628e94d1fe4cdbbe654e61144615d53390 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Thu, 25 Jul 2024 17:04:40 +0700
Subject: [PATCH 07/17] chore: refactor product infomation use swiper

---
 app/components/product-form/product-media.tsx | 197 +++++++-----------
 app/sections/product-information/index.tsx    |   2 +-
 .../related-products/related-products.tsx     |   2 +-
 3 files changed, 77 insertions(+), 124 deletions(-)

diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx
index 6fc8bf1..65ffb3d 100644
--- a/app/components/product-form/product-media.tsx
+++ b/app/components/product-form/product-media.tsx
@@ -1,8 +1,9 @@
-import {Image} from '@shopify/hydrogen';
-import clsx from 'clsx';
-import {useKeenSlider, KeenSliderPlugin} from 'keen-slider/react';
-import {useCallback, useEffect, useState} from 'react';
-import type {MediaFragment} from 'storefrontapi.generated';
+import { Image } from "@shopify/hydrogen";
+import clsx from "clsx";
+import { useState } from "react";
+import type { MediaFragment } from "storefrontapi.generated";
+import { FreeMode, Pagination, Thumbs } from "swiper/modules";
+import { Swiper, type SwiperClass, SwiperSlide } from "swiper/react";
 
 interface ProductMediaProps {
   selectedVariant: any;
@@ -12,129 +13,81 @@ interface ProductMediaProps {
   spacing: number;
 }
 
-
 export function ProductMedia(props: ProductMediaProps) {
-  let {
-    selectedVariant,
-    media: _media,
-    showThumbnails,
-    numberOfThumbnails,
-    spacing,
-  } = props;
-  let media = _media.filter((med) => med.__typename === 'MediaImage');
-  let slideOptions = {
-    initial: 0,
-    loop: true,
-    slides: {
-      perView: 1,
-      spacing: 0,
-    },
-  };
-
-  let thumbnailOptions = {
-    initial: 0,
-    slides: {
-      perView: numberOfThumbnails,
-      spacing: spacing,
-    },
-  };
-
-  let [activeInd, setActiveInd] = useState(0);
-  let [sliderRef, instanceRef] = useKeenSlider({
-    ...slideOptions,
-    slideChanged: (slider) => {
-      let pos = slider.track.details.rel;
-      setActiveInd(pos);
-      let maxThumbnailIndex =
-        thumbnailInstance.current?.track.details.maxIdx || 0;
-      let thumbnailNext = Math.min(
-        Math.floor((pos + 1) / numberOfThumbnails),
-        maxThumbnailIndex,
-      );
-      thumbnailInstance.current?.moveToIdx(thumbnailNext);
-    },
-  });
-
-
-  function moveToIdx(idx: number) {
-    setActiveInd(idx);
-    if (instanceRef.current) {
-      instanceRef.current.moveToIdx(idx);
-    }
-  }
-
-  let [thumbnailRef, thumbnailInstance] = useKeenSlider(thumbnailOptions);
-  function handleClickThumbnail(idx: number) {
-    moveToIdx(idx);
-  }
-
-  useEffect(() => {
-    // instanceRef.current?.update(slideOptions);
-    // thumbnailInstance.current?.update(thumbnailOptions);
-    let selectedInd = media.findIndex((med) => {
-      if (med.__typename !== 'MediaImage') return false;
-      return med.image?.url === selectedVariant?.image.url;
-    });
-    moveToIdx(selectedInd);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedVariant?.id]);
-
+  let { selectedVariant, showThumbnails, media: _media, numberOfThumbnails, spacing } = props;
+  let media = _media.filter((med) => med.__typename === "MediaImage");
+  let [thumbsSwiper, setThumbsSwiper] = useState<SwiperClass | null>(null);
+  let [activeIndex, setActiveIndex] = useState(0);
+  
   return (
-    <div
-      className="grid vt-product-image"
-      style={{ gap: spacing, }}
-    >
-      <div ref={sliderRef} className="keen-slider flex overflow-hidden">
+    <div className="flex flex-col-reverse md:flex-col-reverse gap-4 w-full overflow-hidden">
+      <Swiper
+        onSwiper={setThumbsSwiper}
+        direction="horizontal"
+        spaceBetween={spacing}
+        freeMode
+        slidesPerView={"auto"}
+        threshold={2}
+        modules={[FreeMode, Thumbs]}
+        className="w-full overflow-visible hidden md:block"
+      >
+        {media.map((med, i) => {
+          let image = { ...med.image, altText: med.alt || "Product image" };
+          return (
+            <SwiperSlide
+              key={med.id}
+              className={clsx(
+                "!h-fit !w-fit p-1 border transition-colors !aspect-[3/4] cursor-pointer",
+                activeIndex === i ? "border-black" : "border-transparent",
+              )}
+            >
+              <Image
+                data={image}
+                loading={i === 0 ? "eager" : "lazy"}
+                className="object-contain fadeIn h-[100px] w-full"
+                sizes="auto"
+              />
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
+      <Swiper
+        modules={[FreeMode, Thumbs, Pagination]}
+        pagination={{ type: "fraction" }}
+        spaceBetween={10}
+        thumbs={
+          thumbsSwiper
+            ? {
+                swiper: thumbsSwiper,
+                slideThumbActiveClass: "thumb-active",
+              }
+            : undefined
+        }
+        onSlideChange={(swiper) => {
+          setActiveIndex(swiper.activeIndex);
+        }}
+        className="vt-product-image max-w-full pb-14 md:pb-0 md:[&_.swiper-pagination-fraction]:hidden"
+        style={
+          {
+            "--swiper-pagination-bottom": "20px",
+          } as React.CSSProperties
+        }
+      >
         {media.map((med, i) => {
-          let image =
-            med.__typename === 'MediaImage'
-              ? {...med.image, altText: med.alt || 'Product image'}
-              : null;
+          let image = { ...med.image, altText: med.alt || "Product image" };
           return (
-            image && (
-              <div className="keen-slider__slide" key={med.id}>
-                <Image
-                  data={image}
-                  loading={i === 0 ? 'eager' : 'lazy'}
-                  aspectRatio={'4/5'}
-                  className="object-cover w-full h-full aspect-square fadeIn"
-                />
-              </div>
-            )
+            <SwiperSlide key={med.id}>
+              <Image
+                data={image}
+                loading={i === 0 ? "eager" : "lazy"}
+                aspectRatio={"3/4"}
+                className="object-cover w-full h-auto fadeIn"
+                sizes="auto"
+              />
+            </SwiperSlide>
           );
         })}
-      </div>
-      {showThumbnails && (
-        <div ref={thumbnailRef} className="keen-slider thumbnail flex">
-          {media.map((med, i) => {
-            let image =
-              med.__typename === 'MediaImage'
-                ? {...med.image, altText: med.alt || 'Product image'}
-                : null;
-            return (
-              image && (
-                <div
-                  key={med.id}
-                  className={clsx(
-                    'keen-slider__slide cursor-pointer rounded',
-                    i === activeInd ? 'border-bar border-2' : '',
-                  )}
-                  onClick={() => handleClickThumbnail(i)}
-                >
-                  <Image
-                    data={image}
-                    loading="lazy"
-                    width={200}
-                    sizes="100px 100w, 300px 300w, 500px 500w, 1000px 1000w"
-                    aspectRatio="1/1"
-                    className="object-cover w-full h-full aspect-square fadeIn"
-                  />
-                </div>
-              )
-            );
-          })}
-        </div>
-      )}
+      </Swiper>
     </div>
   );
 }
diff --git a/app/sections/product-information/index.tsx b/app/sections/product-information/index.tsx
index 3b95f97..a2183a2 100644
--- a/app/sections/product-information/index.tsx
+++ b/app/sections/product-information/index.tsx
@@ -188,7 +188,7 @@ let ProductInformation = forwardRef<HTMLDivElement, ProductInformationProps>(
                   />
                 )}
                 <p
-                  className="max-w-[600px] leading-relaxed pt-6"
+                  className="max-w-[600px] leading-relaxed pt-6 prose"
                   dangerouslySetInnerHTML={{
                     __html: descriptionHtml,
                   }}
diff --git a/app/sections/related-products/related-products.tsx b/app/sections/related-products/related-products.tsx
index 6e4af66..afcab95 100644
--- a/app/sections/related-products/related-products.tsx
+++ b/app/sections/related-products/related-products.tsx
@@ -31,7 +31,7 @@ let RelatedProducts = forwardRef<HTMLElement, RelatedProductsProps>(
                 <ProductSwimlane
                   title={heading}
                   count={productsCount}
-                  products={products}
+                  featuredProducts={products}
                 />
               )}
             </Await>

From b1281a6649540cf35deceb6bad555237d3dde27b Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Thu, 25 Jul 2024 17:05:23 +0700
Subject: [PATCH 08/17] chore: refactor instargram section

---
 app/sections/instagram/index.tsx | 225 +++++++++++++++----------------
 1 file changed, 111 insertions(+), 114 deletions(-)

diff --git a/app/sections/instagram/index.tsx b/app/sections/instagram/index.tsx
index e02060c..c02df9d 100644
--- a/app/sections/instagram/index.tsx
+++ b/app/sections/instagram/index.tsx
@@ -15,6 +15,7 @@ import {Pagination} from 'swiper/modules';
 type InstagramData = {
   instagramToken: string;
   backgroundColor: string;
+  width: string;
   imagesPerRow: number;
   speed: number;
   visibleOnMobile: boolean;
@@ -27,6 +28,11 @@ type InstagramData = {
   };
 };
 
+let widthClasses: {[item: string]: string} = {
+  full: '',
+  fixed: 'container',
+};
+
 type InstagramProps = HydrogenComponentProps<
   Awaited<ReturnType<typeof loader>>
 > &
@@ -36,6 +42,7 @@ const Instagram = forwardRef<HTMLElement, InstagramProps>((props, ref) => {
   let {
     instagramToken,
     backgroundColor,
+    width,
     imagesPerRow,
     speed,
     visibleOnMobile,
@@ -60,54 +67,18 @@ const Instagram = forwardRef<HTMLElement, InstagramProps>((props, ref) => {
     );
   };
 
-  let res = loaderData?.data;
-  if (!res) {
-    return (
-      <section
-        ref={ref}
-        {...rest}
-        className={clsx('w-full')}
-        style={sectionStyle}
-      >
-        <div className="flex w-full flex-col items-center justify-center gap-12 px-7 py-12 sm:px-10 sm:py-20">
-          <div className="h-full w-full text-center">{children}</div>
-          <Swiper
-            loop={true}
-            slidesPerView={1}
-            spaceBetween={100}
-            pagination={{
-              clickable: true,
-            }}
-            modules={[Pagination]}
-            className="w-full sm:hidden"
-          >
-            {Array.from({length: 3}).map((idx, i) => {
-              return (
-                <SwiperSlide key={i}>
-                  <div key={i} className="w-full">
-                    {imageItemBlank()}
-                  </div>
-                  <div className="cursor-pointer py-8"></div>
-                </SwiperSlide>
-              );
-            })}
-          </Swiper>
-          <div className="hidden w-full items-center justify-center gap-4 sm:flex">
-            {Array.from({length: 3}).map((idx, i) => (
-              <div key={i} className="w-full">
-                {imageItemBlank()}
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-    );
-  }
+  const defaultInstagramData = Array.from({length: 3}).map((_, i) => ({
+    id: i,
+    media_url: null,
+    username: null,
+  }));
+
+  let res = loaderData?.data ?? defaultInstagramData;
   let displayedImages = res?.slice(0, imagesPerRow);
   const imageItemRender = () => {
     return (
       <div
-        className="hidden items-center justify-center gap-4 sm:flex sm:animate-scrollImage"
+        className="hidden items-center justify-center gap-4 sm:flex sm:animate-scrollContent"
         style={{animationDuration: `var(--speed)`}}
       >
         {displayedImages.map((item, index) => {
@@ -116,25 +87,33 @@ const Instagram = forwardRef<HTMLElement, InstagramProps>((props, ref) => {
               className="group relative aspect-square min-w-80 cursor-pointer"
               key={index}
             >
-              <Image
-                key={index}
-                src={item.media_url}
-                className="aspect-square w-full object-cover"
-                sizes="auto"
-              />
-              <div className="absolute inset-0 z-10 hidden items-center justify-center group-hover:flex">
-                <a
-                  href={`https://www.instagram.com/${item.username}/`}
-                  target="_blank"
-                  className="flex items-center justify-center gap-2"
-                >
-                  <IconInstagram className="h-7 w-7" viewBox="0 0 24 24" />
-                  <span className="font-heading text-xl font-medium text-white">
-                    {item.username}
-                  </span>
-                </a>
-              </div>
-              <div className="absolute inset-0 opacity-0 transition-colors duration-500 group-hover:bg-[#554612] group-hover:opacity-50" />
+              {item.media_url ? (
+                <Image
+                  key={index}
+                  src={item.media_url}
+                  className="aspect-square w-full object-cover"
+                  sizes="auto"
+                />
+              ) : (
+                imageItemBlank()
+              )}
+              {item.username && (
+                <>
+                  <div className="absolute inset-0 z-10 hidden items-center justify-center group-hover:flex">
+                    <a
+                      href={`https://www.instagram.com/${item.username}/`}
+                      target="_blank"
+                      className="flex items-center justify-center gap-2"
+                    >
+                      <IconInstagram className="h-7 w-7" viewBox="0 0 24 24" />
+                      <span className="font-heading text-xl font-medium text-white">
+                        {item.username}
+                      </span>
+                    </a>
+                  </div>
+                  <div className="absolute inset-0 opacity-0 transition-colors duration-500 group-hover:bg-[#554612] group-hover:opacity-50" />
+                </>
+              )}
             </div>
           );
         })}
@@ -149,61 +128,69 @@ const Instagram = forwardRef<HTMLElement, InstagramProps>((props, ref) => {
       className={clsx('h-full w-full', !visibleOnMobile && 'hidden sm:block')}
       style={sectionStyle}
     >
-      <div className="flex flex-col gap-12 px-7 py-12 sm:px-10 sm:py-20">
+      <div
+        className={clsx(
+          'flex flex-col gap-12 px-7 py-12 sm:px-10 sm:py-20',
+          widthClasses[width],
+        )}
+      >
         <div className="h-full w-full text-center">{children}</div>
         <div className="flex gap-0 overflow-hidden sm:gap-4">
-          {res.length === 0 ? (
-            <div className="flex h-full w-full items-center justify-center gap-4">
-              <p>Not found post</p>
-            </div>
-          ) : (
-            <>
-              <Swiper
-                loop={true}
-                slidesPerView={1}
-                spaceBetween={100}
-                pagination={{
-                  clickable: true,
-                }}
-                modules={[Pagination]}
-                className="w-full sm:hidden"
-              >
-                {displayedImages.map((item, index) => {
-                  return (
-                    <SwiperSlide key={index}>
-                      <div className="group relative aspect-square min-w-80">
+          <>
+            <Swiper
+              loop={true}
+              slidesPerView={1}
+              spaceBetween={100}
+              pagination={{
+                clickable: true,
+              }}
+              modules={[Pagination]}
+              className="w-full sm:hidden"
+            >
+              {displayedImages.map((item, index) => {
+                return (
+                  <SwiperSlide key={index}>
+                    <div className="group relative aspect-square min-w-80">
+                      {item.media_url ? (
                         <Image
+                          key={index}
                           src={item.media_url}
-                          sizes="auto"
                           className="aspect-square w-full object-cover"
+                          sizes="auto"
                         />
-                        <div className="absolute inset-0 z-10 hidden w-full items-center justify-center group-hover:flex">
-                          <a
-                            href={`https://www.instagram.com/${item.username}/`}
-                            target="_blank"
-                            className="flex items-center justify-center gap-2"
-                          >
-                            <IconInstagram
-                              className="h-7 w-7"
-                              viewBox="0 0 24 24"
-                            />
-                            <span className="font-heading text-xl font-medium text-white">
-                              {item.username}
-                            </span>
-                          </a>
-                        </div>
-                        <div className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:bg-[#554612] group-hover:opacity-50" />
-                      </div>
-                      <div className="cursor-pointer py-8"></div>
-                    </SwiperSlide>
-                  );
-                })}
-              </Swiper>
-              {Array.from({length: 11}).map((idx, i) => (
-                <div key={i}>{imageItemRender()}</div>
-              ))}
-            </>
-          )}
+                      ) : (
+                        imageItemBlank()
+                      )}
+                      {item.username && (
+                        <>
+                          <div className="absolute inset-0 z-10 hidden items-center justify-center group-hover:flex">
+                            <a
+                              href={`https://www.instagram.com/${item.username}/`}
+                              target="_blank"
+                              className="flex items-center justify-center gap-2"
+                            >
+                              <IconInstagram
+                                className="h-7 w-7"
+                                viewBox="0 0 24 24"
+                              />
+                              <span className="font-heading text-xl font-medium text-white">
+                                {item.username}
+                              </span>
+                            </a>
+                          </div>
+                          <div className="absolute inset-0 opacity-0 transition-colors duration-500 group-hover:bg-[#554612] group-hover:opacity-50" />
+                        </>
+                      )}
+                    </div>
+                    <div className="py-8"></div>
+                  </SwiperSlide>
+                );
+              })}
+            </Swiper>
+            {Array.from({length: 11}).map((idx, i) => (
+              <div key={i}>{imageItemRender()}</div>
+            ))}
+          </>
         </div>
       </div>
     </section>
@@ -235,8 +222,6 @@ export const schema: HydrogenComponentSchema = {
           type: 'text',
           name: 'instagramToken',
           label: 'Instagram api token',
-          defaultValue:
-            'IGQWRPX3Eyc1RHd3padDVwRXZANdkp4ZAkE1bkxjRlNtd3V4WnBXZAXUxWWlvVjlTc2h3SU45NmZAVOHptcEswalkyTHYtckh6cnlUNTUtaHpDUjYxTE04X0RwVG5qRnJ0cDhxcnlBVjRib3BoYUxGa2xCTlFZAZAC1PMmMZD',
           placeholder: '@instagram',
           helpText:
             'Learn more about how to get <a href="https://docs.oceanwp.org/article/487-how-to-get-instagram-access-token" target="_blank">API token for Instagram</a> section.',
@@ -247,6 +232,18 @@ export const schema: HydrogenComponentSchema = {
           name: 'backgroundColor',
           defaultValue: '#F8F8F0',
         },
+        {
+          type: 'select',
+          name: 'width',
+          label: 'Content width',
+          configs: {
+            options: [
+              {value: 'full', label: 'Full page'},
+              {value: 'fixed', label: 'Fixed'},
+            ],
+          },
+          defaultValue: 'fixed',
+        },
         {
           type: 'range',
           name: 'imagesPerRow',

From 4c29a4ed5d70c1097a1e198302592c38cb7f5a46 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Thu, 25 Jul 2024 17:06:01 +0700
Subject: [PATCH 09/17] chore: update scroll animate for scrolling text section

---
 app/sections/scrolling-text/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/sections/scrolling-text/index.tsx b/app/sections/scrolling-text/index.tsx
index 003f81e..53808d3 100644
--- a/app/sections/scrolling-text/index.tsx
+++ b/app/sections/scrolling-text/index.tsx
@@ -46,17 +46,17 @@ const ScrollingText = forwardRef<HTMLElement, ScrollingProps>((props, ref) => {
             !visibleOnMobile && 'hidden sm:block',
         )}>
             <div className='overflow-hidden flex'>
-                <h3 className='font-medium whitespace-nowrap animate-scrollText text-[var(--text-color)] '
+                <h3 className='font-medium whitespace-nowrap animate-scrollContent text-[var(--text-color)] '
                     style={{ animationDuration: `var(--speed)`, fontSize: `${textSize}px`, }}
                 >
                     {`  ${content}  `.repeat(15)}
                 </h3>
-                <h3 className='font-medium whitespace-nowrap animate-scrollText text-[var(--text-color)] '
+                <h3 className='font-medium whitespace-nowrap animate-scrollContent text-[var(--text-color)] '
                     style={{ animationDuration: `var(--speed)`, fontSize: `${textSize}px`, }}
                 >
                     {`  ${content}  `.repeat(15)}
                 </h3>
-                <h3 className='font-medium whitespace-nowrap animate-scrollText text-[var(--text-color)] '
+                <h3 className='font-medium whitespace-nowrap animate-scrollContent text-[var(--text-color)] '
                     style={{ animationDuration: `var(--speed)`, fontSize: `${textSize}px`, }}
                 >
                     {`  ${content}  `.repeat(15)}

From e016e4d9c55d0c2d3cd826eab393b5372f0e95b2 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Thu, 25 Jul 2024 17:06:34 +0700
Subject: [PATCH 10/17] chore: refactor slides show section

---
 app/sections/slides/index.tsx | 143 +++++++++++++++++++---------------
 1 file changed, 82 insertions(+), 61 deletions(-)

diff --git a/app/sections/slides/index.tsx b/app/sections/slides/index.tsx
index 8614f02..51869c9 100644
--- a/app/sections/slides/index.tsx
+++ b/app/sections/slides/index.tsx
@@ -1,81 +1,102 @@
 import type {
-    HydrogenComponentProps,
-    HydrogenComponentSchema,
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
 } from '@weaverse/hydrogen';
-import { forwardRef, CSSProperties } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { EffectFade } from 'swiper/modules';
+import {CSSProperties, forwardRef} from 'react';
+import {EffectFade} from 'swiper/modules';
+import {Swiper, SwiperSlide} from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/effect-fade';
+import clsx from 'clsx';
 
 interface SlidesProps extends HydrogenComponentProps {
-    sectionHeight: number;
+  sectionHeight: number;
+  width: string;
 }
 
+let widthClasses: {[item: string]: string} = {
+  full: '',
+  fixed: 'container',
+};
+
 const Slides = forwardRef<HTMLElement, SlidesProps>((props, ref) => {
-    let {
-        sectionHeight,
-        children,
-        ...rest
-    } = props;
+  let {sectionHeight, width, children, ...rest} = props;
 
-    let sectionStyle: CSSProperties = {
-        '--section-height': `${sectionHeight}px`,
-    } as CSSProperties;
+  let sectionStyle: CSSProperties = {
+    '--section-height': `${sectionHeight}px`,
+  } as CSSProperties;
 
-    return (
-        <section ref={ref} {...rest} style={sectionStyle} className='sm:h-[var(--section-height)] w-full relative'>
-            <Swiper
-                loop={true}
-                slidesPerView={1}
-                className='h-full mySwiper'
-                effect={'fade'}
-                fadeEffect={{
-                    crossFade: true,
-                }}
-                modules={[EffectFade]}
-            >
-                {children?.map((child, index) => (
-                    <SwiperSlide key={index}>
-                        {child}
-                    </SwiperSlide>
-                ))}
-            </Swiper>
-        </section>
-    );
+  return (
+    <section
+      ref={ref}
+      {...rest}
+      style={sectionStyle}
+      className={clsx(
+        'relative w-full sm:h-[var(--section-height)]',
+        widthClasses[width],
+      )}
+    >
+      <Swiper
+        loop={true}
+        slidesPerView={1}
+        className="mySwiper h-full"
+        effect={'fade'}
+        fadeEffect={{
+          crossFade: true,
+        }}
+        modules={[EffectFade]}
+      >
+        {children?.map((child, index) => (
+          <SwiperSlide key={index}>{child}</SwiperSlide>
+        ))}
+      </Swiper>
+    </section>
+  );
 });
 
 export default Slides;
 
 export let schema: HydrogenComponentSchema = {
-    type: 'slides-index',
-    title: 'Slides',
-    toolbar: ['general-settings', ['duplicate', 'delete']],
-    inspector: [
+  type: 'slides-index',
+  title: 'Slides',
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+  inspector: [
+    {
+      group: 'Slides',
+      inputs: [
+        {
+          type: 'range',
+          name: 'sectionHeight',
+          label: 'Section height',
+          defaultValue: 450,
+          configs: {
+            min: 400,
+            max: 700,
+            step: 10,
+            unit: 'px',
+          },
+        },
         {
-            group: 'Slides',
-            inputs: [
-                {
-                    type: 'range',
-                    name: 'sectionHeight',
-                    label: 'Section height',
-                    defaultValue: 450,
-                    configs: {
-                        min: 400,
-                        max: 700,
-                        step: 10,
-                        unit: 'px',
-                    },
-                },
+          type: 'select',
+          name: 'width',
+          label: 'Content width',
+          configs: {
+            options: [
+              {value: 'full', label: 'Full page'},
+              {value: 'fixed', label: 'Fixed'},
             ],
+          },
+          defaultValue: 'fixed',
         },
-    ],
-    childTypes: ['slides-item'],
-    presets: {
-        children: [
-            {
-                type: 'slides-item',
-            }
-        ],
+      ],
     },
-};
\ No newline at end of file
+  ],
+  childTypes: ['slides-item'],
+  presets: {
+    children: [
+      {
+        type: 'slides-item',
+      },
+    ],
+  },
+};

From 4cab93cde32480f62b63d2a2bb0de5fdd83a27a3 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Tue, 30 Jul 2024 17:10:37 +0700
Subject: [PATCH 11/17] chore: update button component

---
 @/components/button.tsx       |  4 +++-
 app/sections/atoms/button.tsx | 45 +++++++++++++++++++++++++----------
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/@/components/button.tsx b/@/components/button.tsx
index 52eb6b8..6dd5586 100644
--- a/@/components/button.tsx
+++ b/@/components/button.tsx
@@ -26,7 +26,7 @@ const buttonVariants = cva(
       },
       shape: {
         default: 'rounded',
-        round: 'rounded-md'
+        round: 'rounded-md',
       }
     },
     defaultVariants: {
@@ -43,6 +43,7 @@ export interface ButtonProps
   asChild?: boolean;
   as?: React.ElementType;
   to?: string;
+  target?: string;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -70,6 +71,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         )}
         ref={ref}
         {...props}
+        target={props.to ? props?.target || '_self' : undefined}
       >
         {loading && (
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
diff --git a/app/sections/atoms/button.tsx b/app/sections/atoms/button.tsx
index 8608f7d..5a20ec7 100644
--- a/app/sections/atoms/button.tsx
+++ b/app/sections/atoms/button.tsx
@@ -3,9 +3,15 @@ import type {HydrogenComponentSchema} from '@weaverse/hydrogen';
 import {IconEllipse} from '~/components/Icon';
 import {CSSProperties, forwardRef} from 'react';
 
-const WeaverseButton = forwardRef<HTMLButtonElement, ButtonProps>(
+interface OriginalButtonProps extends ButtonProps {
+  href?: string;
+  target?: string;
+  textColor?: string;
+}
+
+const WeaverseButton = forwardRef<HTMLButtonElement, OriginalButtonProps>(
   (props, ref) => {
-    const {href, target, value, variant, textColor, ...rest} = props;
+    const {href, target, value, variant, shape, textColor, ...rest} = props;
     const Component = href ? 'a' : 'button';
     let style = {
       color: textColor,
@@ -14,8 +20,9 @@ const WeaverseButton = forwardRef<HTMLButtonElement, ButtonProps>(
       <Button
         as={Component}
         to={href}
-        target={href ? target || '_self' : undefined}
+        target={target}
         variant={variant}
+        shape={shape}
         ref={ref}
         {...rest}
         className={`w-fit ${props.className}`}
@@ -38,6 +45,8 @@ const WeaverseButton = forwardRef<HTMLButtonElement, ButtonProps>(
   },
 );
 
+export default WeaverseButton;
+
 export const schema: HydrogenComponentSchema = {
   title: 'Button',
   type: 'button',
@@ -50,17 +59,22 @@ export const schema: HydrogenComponentSchema = {
           label: 'Text color',
           name: 'textColor',
         },
+        {
+          type: 'text',
+          name: 'value',
+          label: 'Text',
+          defaultValue: 'Shop now',
+        },
         {
           type: 'select',
           name: 'variant',
           label: 'Variant',
-          defaultValue: 'default',
+          defaultValue: 'primary',
           configs: {
             options: [
-              {label: 'Default', value: 'default'},
+              {label: 'Primary', value: 'primary'},
               {label: 'Outline', value: 'outline'},
               {label: 'Secondary', value: 'secondary'},
-              {label: 'Primary', value: 'primary'},
               {label: 'Decor', value: 'decor'},
             ],
           },
@@ -81,10 +95,17 @@ export const schema: HydrogenComponentSchema = {
           condition: `variant.ne.decor`,
         },
         {
-          type: 'text',
-          name: 'value',
-          label: 'Text',
-          defaultValue: 'Shop now',
+          type: 'select',
+          name: 'shape',
+          label: 'Shape',
+          defaultValue: 'round',
+          configs: {
+            options: [
+              {label: 'Default', value: 'default'},
+              {label: 'Round', value: 'round'},
+            ],
+          },
+          condition: `variant.ne.decor`,
         },
         {
           type: 'url',
@@ -110,6 +131,4 @@ export const schema: HydrogenComponentSchema = {
       ],
     },
   ],
-};
-
-export default WeaverseButton;
+};
\ No newline at end of file

From 8d26bee6d513c39ec46e9ac346d5df9db2cf0d5f Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Tue, 30 Jul 2024 17:11:03 +0700
Subject: [PATCH 12/17] chore: fix bug search route

---
 app/routes/($locale).search.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/($locale).search.tsx b/app/routes/($locale).search.tsx
index 71931aa..4cb5749 100644
--- a/app/routes/($locale).search.tsx
+++ b/app/routes/($locale).search.tsx
@@ -290,7 +290,7 @@ function NoResults({
                 /> */}
                 <ProductSwimlane
                   title="Trending Products"
-                  products={featuredProducts}
+                  featuredProducts={featuredProducts}
                 />
               </>
             );

From fb610849e40271775ecebfba92a30751ee6e9a61 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Tue, 30 Jul 2024 17:11:59 +0700
Subject: [PATCH 13/17] chore: update container class

---
 app/sections/atoms/Section.tsx | 2 +-
 app/styles/tailwind.css        | 2 +-
 app/weaverse/schema.ts         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/sections/atoms/Section.tsx b/app/sections/atoms/Section.tsx
index 550acbd..8241602 100644
--- a/app/sections/atoms/Section.tsx
+++ b/app/sections/atoms/Section.tsx
@@ -36,7 +36,7 @@ let variants = cva("relative", {
     width: {
       full: "w-full h-full",
       stretch: "w-full h-full",
-      fixed: "w-full h-full max-w-[var(--page-width,1280px)] mx-auto",
+      fixed: "w-full h-full max-w-[var(--page-width,1440px)] mx-auto",
     },
     padding: {
       full: "",
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 1e277e9..a0bbd85 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -103,7 +103,7 @@
 }
 
 .container {
-    max-width: var(--page-width, 1280px);
+    max-width: var(--page-width, 1440px);
 }
 
 .custom-scroll::-webkit-scrollbar {
diff --git a/app/weaverse/schema.ts b/app/weaverse/schema.ts
index f9395f4..efd669e 100644
--- a/app/weaverse/schema.ts
+++ b/app/weaverse/schema.ts
@@ -296,7 +296,7 @@ export const themeSchema: HydrogenThemeSchema = {
             step: 10,
             unit: "px",
           },
-          defaultValue: 1280,
+          defaultValue: 1440,
         },
         {
           type: 'range',

From 40f87634598f63de8468b6bdd6284750c8b52317 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Tue, 30 Jul 2024 17:16:02 +0700
Subject: [PATCH 14/17] chore: update swiper for device mobile

---
 app/sections/instagram/index.tsx         | 102 ++++++++++++-----------
 app/sections/product-placement/items.tsx |  51 +++++-------
 2 files changed, 73 insertions(+), 80 deletions(-)

diff --git a/app/sections/instagram/index.tsx b/app/sections/instagram/index.tsx
index c02df9d..85ddcb1 100644
--- a/app/sections/instagram/index.tsx
+++ b/app/sections/instagram/index.tsx
@@ -137,56 +137,58 @@ const Instagram = forwardRef<HTMLElement, InstagramProps>((props, ref) => {
         <div className="h-full w-full text-center">{children}</div>
         <div className="flex gap-0 overflow-hidden sm:gap-4">
           <>
-            <Swiper
-              loop={true}
-              slidesPerView={1}
-              spaceBetween={100}
-              pagination={{
-                clickable: true,
-              }}
-              modules={[Pagination]}
-              className="w-full sm:hidden"
-            >
-              {displayedImages.map((item, index) => {
-                return (
-                  <SwiperSlide key={index}>
-                    <div className="group relative aspect-square min-w-80">
-                      {item.media_url ? (
-                        <Image
-                          key={index}
-                          src={item.media_url}
-                          className="aspect-square w-full object-cover"
-                          sizes="auto"
-                        />
-                      ) : (
-                        imageItemBlank()
-                      )}
-                      {item.username && (
-                        <>
-                          <div className="absolute inset-0 z-10 hidden items-center justify-center group-hover:flex">
-                            <a
-                              href={`https://www.instagram.com/${item.username}/`}
-                              target="_blank"
-                              className="flex items-center justify-center gap-2"
-                            >
-                              <IconInstagram
-                                className="h-7 w-7"
-                                viewBox="0 0 24 24"
-                              />
-                              <span className="font-heading text-xl font-medium text-white">
-                                {item.username}
-                              </span>
-                            </a>
-                          </div>
-                          <div className="absolute inset-0 opacity-0 transition-colors duration-500 group-hover:bg-[#554612] group-hover:opacity-50" />
-                        </>
-                      )}
-                    </div>
-                    <div className="py-8"></div>
-                  </SwiperSlide>
-                );
-              })}
-            </Swiper>
+            <div className="block sm:hidden w-full">
+              <Swiper
+                loop={true}
+                slidesPerView={1}
+                spaceBetween={100}
+                pagination={{
+                  clickable: true,
+                }}
+                modules={[Pagination]}
+                className="w-full"
+              >
+                {displayedImages.map((item, index) => {
+                  return (
+                    <SwiperSlide key={index}>
+                      <div className="group relative aspect-square min-w-80">
+                        {item.media_url ? (
+                          <Image
+                            key={index}
+                            src={item.media_url}
+                            className="aspect-square w-full object-cover"
+                            sizes="auto"
+                          />
+                        ) : (
+                          imageItemBlank()
+                        )}
+                        {item.username && (
+                          <>
+                            <div className="absolute inset-0 z-10 hidden items-center justify-center group-hover:flex">
+                              <a
+                                href={`https://www.instagram.com/${item.username}/`}
+                                target="_blank"
+                                className="flex items-center justify-center gap-2"
+                              >
+                                <IconInstagram
+                                  className="h-7 w-7"
+                                  viewBox="0 0 24 24"
+                                />
+                                <span className="font-heading text-xl font-medium text-white">
+                                  {item.username}
+                                </span>
+                              </a>
+                            </div>
+                            <div className="absolute inset-0 opacity-0 transition-colors duration-500 group-hover:bg-[#554612] group-hover:opacity-50" />
+                          </>
+                        )}
+                      </div>
+                      <div className="py-8"></div>
+                    </SwiperSlide>
+                  );
+                })}
+              </Swiper>
+            </div>
             {Array.from({length: 11}).map((idx, i) => (
               <div key={i}>{imageItemRender()}</div>
             ))}
diff --git a/app/sections/product-placement/items.tsx b/app/sections/product-placement/items.tsx
index 458f4e2..5e5821a 100644
--- a/app/sections/product-placement/items.tsx
+++ b/app/sections/product-placement/items.tsx
@@ -20,13 +20,7 @@ const ProductPlacementItems = forwardRef<
   HTMLDivElement,
   ProductPlacementItemsProps
 >((props, ref) => {
-  let {
-    productsPerRow,
-    thumbnailRatio,
-    itemsSpacing,
-    children,
-    ...rest
-  } = props;
+  let {productsPerRow, thumbnailRatio, itemsSpacing, children, ...rest} = props;
   let contentStyle: CSSProperties = {
     '--item-thumbs-ratio': thumbnailRatio,
     '--items-spacing': `${itemsSpacing}px`,
@@ -36,12 +30,7 @@ const ProductPlacementItems = forwardRef<
     '--swiper-pagination-bullet-border-radius': '2px',
   } as CSSProperties;
   return (
-    <div
-      ref={ref}
-      {...rest}
-      style={contentStyle}
-      className="w-full bg-inherit"
-    >
+    <div ref={ref} {...rest} style={contentStyle} className="w-full bg-inherit">
       <div className="flex flex-col gap-5">
         <Grid
           items={productsPerRow}
@@ -50,23 +39,25 @@ const ProductPlacementItems = forwardRef<
         >
           {children}
         </Grid>
-        <Swiper
-          loop={true}
-          slidesPerView={1}
-          spaceBetween={100}
-          pagination={{
-            clickable: true,
-          }}
-          modules={[Pagination]}
-          className="w-full sm:hidden"
-        >
-          {children?.map((child, i) => (
-            <SwiperSlide key={i}>
-              {child}
-              <div className="cursor-pointer py-8"></div>
-            </SwiperSlide>
-          ))}
-        </Swiper>
+        <div className="block w-full sm:hidden">
+          <Swiper
+            loop={true}
+            slidesPerView={1}
+            spaceBetween={100}
+            pagination={{
+              clickable: true,
+            }}
+            modules={[Pagination]}
+            className="w-full"
+          >
+            {children?.map((child, i) => (
+              <SwiperSlide key={i}>
+                {child}
+                <div className="cursor-pointer py-8"></div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
       </div>
     </div>
   );

From 612b4410e785f4bf535b2ec6b8ff8630fd710c83 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Tue, 30 Jul 2024 17:16:34 +0700
Subject: [PATCH 15/17] chore: refactor collection list

---
 .../collection-list/collection-list.tsx       |  94 ++++++++++
 app/sections/collection-list/index.tsx        | 165 +++---------------
 2 files changed, 115 insertions(+), 144 deletions(-)
 create mode 100644 app/sections/collection-list/collection-list.tsx

diff --git a/app/sections/collection-list/collection-list.tsx b/app/sections/collection-list/collection-list.tsx
new file mode 100644
index 0000000..55b859d
--- /dev/null
+++ b/app/sections/collection-list/collection-list.tsx
@@ -0,0 +1,94 @@
+import {Button} from '@/components/button';
+import {useLoaderData} from '@remix-run/react';
+import {Pagination} from '@shopify/hydrogen';
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import { forwardRef} from 'react';
+import {useInView} from 'react-intersection-observer';
+import type {StoreCollectionsQuery} from 'storefrontapi.generated';
+import {CollectionsLoadedOnScroll} from './collection-loader-on-scroll';
+
+interface CollectionListProps extends HydrogenComponentProps {
+  collectionsPerRow: number;
+  lazyLoadImage: boolean;
+}
+
+let CollectionListItem = forwardRef<HTMLDivElement, CollectionListProps>(
+  (props, sectionRef) => {
+    let {ref, inView} = useInView();
+    let {collections} = useLoaderData<StoreCollectionsQuery>();
+    let {collectionsPerRow, lazyLoadImage, children, ...rest} = props;
+    return (
+      <div ref={sectionRef} {...rest}>
+        <Pagination connection={collections}>
+          {({
+            nodes,
+            isLoading,
+            PreviousLink,
+            NextLink,
+            nextPageUrl,
+            hasNextPage,
+            state,
+          }) => (
+            <>
+              <div className="mb-6 flex items-center justify-center">
+                <Button as={PreviousLink} variant="outline">
+                  {isLoading ? 'Loading...' : 'Previous collections'}
+                </Button>
+              </div>
+              <CollectionsLoadedOnScroll
+                nodes={nodes}
+                collectionsPerRow={collectionsPerRow}
+                lazyLoadImage={lazyLoadImage}
+                inView={inView}
+                nextPageUrl={nextPageUrl}
+                hasNextPage={hasNextPage}
+                state={state}
+              />
+              <div className="mt-6 flex items-center justify-center">
+                <Button ref={ref} as={NextLink} variant="outline">
+                  {isLoading ? 'Loading...' : 'Next collections'}
+                </Button>
+              </div>
+            </>
+          )}
+        </Pagination>
+      </div>
+    );
+  },
+);
+
+export default CollectionListItem;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'collection-list--item',
+  title: 'Collection list',
+  limit: 1,
+  toolbar: ['general-settings'],
+  inspector: [
+    {
+      group: 'Collection list',
+      inputs: [
+        {
+          type: 'range',
+          name: 'collectionsPerRow',
+          label: 'Collections per row',
+          defaultValue: 3,
+          configs: {
+            min: 1,
+            max: 4,
+            step: 1,
+          },
+        },
+        {
+          type: 'switch',
+          name: 'lazyLoadImage',
+          label: 'Lazy load image',
+          defaultValue: true,
+        },
+      ],
+    },
+  ],
+};
diff --git a/app/sections/collection-list/index.tsx b/app/sections/collection-list/index.tsx
index 3ef9dd8..1348e6e 100644
--- a/app/sections/collection-list/index.tsx
+++ b/app/sections/collection-list/index.tsx
@@ -1,84 +1,16 @@
-import { useLoaderData } from '@remix-run/react';
-import { Pagination } from '@shopify/hydrogen';
-import type {
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from '@weaverse/hydrogen';
-import { forwardRef, CSSProperties, Children } from 'react';
-import type { StoreCollectionsQuery } from 'storefrontapi.generated';
-import { Section } from '~/components/Text';
-import { Button } from '@/components/button';
-import { CollectionsLoadedOnScroll } from './collection-loader-on-scroll';
-import { useInView } from 'react-intersection-observer';
-import clsx from 'clsx';
+import type {HydrogenComponentSchema} from '@weaverse/hydrogen';
+import {forwardRef} from 'react';
+import {layoutInputs, Section, SectionProps} from '../atoms/Section';
 
-type Alignment = 'left' | 'center' | 'right';
-interface CollectionListProps extends HydrogenComponentProps {
-  textColor: string;
-  contentAlignment: Alignment;
-  collectionsPerRow: number;
-  topPadding: number;
-  bottomPadding: number;
-  lazyLoadImage: boolean;
-}
-
-let alignmentClasses: Record<Alignment, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-};
+type CollectionListProps = SectionProps;
 
 let CollectionList = forwardRef<HTMLElement, CollectionListProps>(
-  (props, sectionRef) => {
-    let {ref, inView} = useInView();
-    let { collections } = useLoaderData<StoreCollectionsQuery>();
-    let { textColor, contentAlignment, collectionsPerRow, topPadding, bottomPadding, lazyLoadImage, children, ...rest } =
-      props;
-    let contentStyle: CSSProperties = {
-      '--top-padding': `${topPadding}px`,
-      '--bottom-padding': `${bottomPadding}px`,
-      color: textColor,
-    } as CSSProperties;
+  (props, ref) => {
+    let {children, ...rest} = props;
     return (
-      <section ref={sectionRef} {...rest} style={contentStyle} 
-        className={clsx('w-full flex justify-center items-center',
-          alignmentClasses[contentAlignment!],
-        )}>
-        <div className='max-w-[1440px] pt-[var(--top-padding)] pb-[var(--bottom-padding)]'>
-        {!!Children.count(children) && (
-            <div className='p-6 md:p-8 lg:p-12'>
-              {children}
-            </div>
-          )}
-          <Section as="div">
-            <Pagination connection={collections}>
-              {({ nodes, isLoading, PreviousLink, NextLink, nextPageUrl, hasNextPage, state, }) => (
-                <>
-                  <div className="flex items-center justify-center mb-6">
-                    <Button as={PreviousLink} variant="outline">
-                      {isLoading ? 'Loading...' : 'Previous collections'}
-                    </Button>
-                  </div>
-                  <CollectionsLoadedOnScroll
-                      nodes={nodes}
-                      collectionsPerRow={collectionsPerRow}
-                      lazyLoadImage={lazyLoadImage}
-                      inView={inView}
-                      nextPageUrl={nextPageUrl}
-                      hasNextPage={hasNextPage}
-                      state={state}
-                    />
-                  <div className="flex items-center justify-center mt-6">
-                    <Button ref={ref} as={NextLink} variant="outline">
-                      {isLoading ? 'Loading...' : 'Next collections'}
-                    </Button>
-                  </div>
-                </>
-              )}
-            </Pagination>
-          </Section>
-        </div>
-      </section>
+      <Section ref={ref} {...rest}>
+        {children}
+      </Section>
     );
   },
 );
@@ -95,75 +27,20 @@ export let schema: HydrogenComponentSchema = {
   toolbar: ['general-settings'],
   inspector: [
     {
-      group: 'Collection list',
-      inputs: [
-        {
-          type: 'color',
-          name: 'textColor',
-          label: 'Text color',
-        },
-        {
-          type: 'toggle-group',
-          label: 'Content alignment',
-          name: 'contentAlignment',
-          configs: {
-            options: [
-              { label: 'Left', value: 'left' },
-              { label: 'Center', value: 'center' },
-              { label: 'Right', value: 'right' },
-            ],
-          },
-          defaultValue: 'left',
-        },
-        {
-          type: 'range',
-          name: 'collectionsPerRow',
-          label: 'Collections per row',
-          defaultValue: 3,
-          configs: {
-            min: 1,
-            max: 4,
-            step: 1,
-          },
-        },
-        {
-          type: 'range',
-          name: 'topPadding',
-          label: 'Top padding',
-          defaultValue: 0,
-          configs: {
-            min: 0,
-            max: 100,
-            step: 1,
-          },
-        },
-        {
-          type: 'range',
-          name: 'bottomPadding',
-          label: 'Bottom padding',
-          defaultValue: 0,
-          configs: {
-            min: 0,
-            max: 100,
-            step: 1,
-          },
-        },
-        {
-          type: 'switch',
-          name: 'lazyLoadImage',
-          label: 'Lazy load image',
-          defaultValue: true,
-        },
-      ],
+      group: 'Layout',
+      inputs: layoutInputs.filter(({ name }) => name !== 'divider' && name !== 'borderRadius'),
     },
   ],
-  childTypes: ['heading'],
+  childTypes: ['heading', 'collection-list--item'],
   presets: {
-      children: [
-           {
-              type: 'heading',
-              content: "Collections",
-          },
-      ],
+    children: [
+      {
+        type: 'heading',
+        content: 'Collections',
+      },
+      {
+        type: 'collection-list--item',
+      },
+    ],
   },
 };

From 40b9ada9e45ff34f3039e1313f8903d496c63190 Mon Sep 17 00:00:00 2001
From: dangthang1903 <dangthangkk2000@gmail.com>
Date: Tue, 30 Jul 2024 17:16:59 +0700
Subject: [PATCH 16/17] chore: refactor feature product

---
 app/sections/feature-product/index.tsx        | 302 +++---------------
 .../feature-product/list-products.tsx         | 224 +++++++++++++
 app/weaverse/components.ts                    |   4 +
 3 files changed, 267 insertions(+), 263 deletions(-)
 create mode 100644 app/sections/feature-product/list-products.tsx

diff --git a/app/sections/feature-product/index.tsx b/app/sections/feature-product/index.tsx
index 622e3db..6ff1e0e 100644
--- a/app/sections/feature-product/index.tsx
+++ b/app/sections/feature-product/index.tsx
@@ -1,272 +1,48 @@
 import type {
-    HydrogenComponentProps,
-    HydrogenComponentSchema,
-    ComponentLoaderArgs,
-    WeaverseCollection,
+  HydrogenComponentSchema,
 } from '@weaverse/hydrogen';
-import { forwardRef, CSSProperties } from 'react';
-import { FEATURED_PRODUCTS_QUERY } from '~/data/queries';
-import { IconImageBlank } from '~/components/Icon';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/swiper-bundle.css';
-import 'swiper/css/pagination';
-import { Pagination } from 'swiper/modules';
-import clsx from 'clsx';
-import { Button } from '@/components/button';
-import { ProductCard } from '~/components/ProductCard';
-import { getImageLoadingPriority } from '~/lib/const';
-
-type FeaturedProductsData = {
-    products: WeaverseCollection;
-    textColor: string;
-    backgroundColor: string;
-    totalProduct: number;
-    productsPerRow: number;
-    showViewAllLink: boolean;
-    topPadding: number;
-    bottomPadding: number;
-    lazyLoadImage: boolean;
-};
-
-type FeaturedProductsProps = HydrogenComponentProps<Awaited<ReturnType<typeof loader>>> & FeaturedProductsData;
-
-let productPerRowClasses: { [item: number]: string } = {
-    1: 'sm:grid-cols-1',
-    2: 'sm:grid-cols-2',
-    3: 'sm:grid-cols-3',
-    4: 'sm:grid-cols-4',
-};
-
-const FeaturedProducts = forwardRef<HTMLElement, FeaturedProductsProps>(
-    (props, ref) => {
-        let { products, textColor, backgroundColor, totalProduct, productsPerRow, showViewAllLink, topPadding, bottomPadding, lazyLoadImage, loaderData, children, ...rest } = props;
-
-        let sectionStyle: CSSProperties = {
-            color: textColor,
-            '--background-color': backgroundColor,
-            '--top-padding-desktop': `${topPadding}px`,
-            '--bottom-padding-desktop': `${bottomPadding}px`,
-            '--top-padding-mobile': `${topPadding > 20 ? topPadding - 20 : topPadding}px`,
-            '--bottom-padding-mobile': `${bottomPadding > 20 ? bottomPadding - 20 : bottomPadding}px`,
-            '--swiper-theme-color': '#3D490B',
-        } as CSSProperties;
-        let res = loaderData?.collection?.products?.nodes;
-        let displayedProducts = res?.slice(0, totalProduct);
-        const productItemBlank = () => {
-            return (
-                <div className='flex flex-col gap-4 w-full cursor-pointer'>
-                    <div className="bg-background-subtle-1 flex justify-center items-center w-full aspect-square">
-                        <IconImageBlank
-                            viewBox="0 0 526 526"
-                            className="w-full h-full opacity-80"
-                        />
-                    </div>
-                    <div className="flex flex-col gap-2 px-2">
-                        <p className='font-normal text-base'>By vendor</p>
-                        <h4 className='font-medium'>Product title</h4>
-                        <p className='font-normal text-base'>Price</p>
-                    </div>
-                </div>
-            );
-        }
-        return (
-            <section ref={ref} {...rest} className='w-full h-full flex justify-center bg-[var(--background-color)]' style={sectionStyle}>
-                <div className={clsx(
-                    'px-4 w-full flex flex-col gap-12 container sm:px-6 pt-[var(--top-padding-mobile)] pb-[var(--bottom-padding-mobile)] sm:pt-[var(--top-padding-desktop)] sm:pb-[var(--bottom-padding-desktop)]',
-                )}>
-                    {children}
-                    {loaderData === undefined || null ? (
-                        <>
-                            <Swiper
-                                loop={true}
-                                slidesPerView={1}
-                                spaceBetween={100}
-                                pagination={{
-                                    clickable: true,
-                                }}
-                                modules={[Pagination]}
-                                className='sm:hidden w-full'
-                            >
-                                {Array.from({ length: 4 }).map((idx, i) => {
-                                    return (
-                                        <SwiperSlide key={i}>
-                                            <div key={i} className='w-full'>
-                                                {productItemBlank()}
-                                            </div>
-                                            <div className='py-8 cursor-pointer'></div>
-                                        </SwiperSlide>
-                                    );
-                                })}
-                            </Swiper>
-                            <div className={clsx('sm:grid justify-self-center gap-4 hidden grid-cols-4',
-                            )}>
-                                {Array.from({ length: 4 }).map((idx, i) => (
-                                    <div key={i} className='w-full'>
-                                        {productItemBlank()}
-                                    </div>
-                                ))}
-                            </div>
-                        </>
-                    ) : (
-                        <>
-                            <Swiper
-                                loop={true}
-                                slidesPerView={1}
-                                spaceBetween={100}
-                                pagination={{
-                                    clickable: true,
-                                }}
-                                modules={[Pagination]}
-                                className='sm:hidden w-full'
-                            >
-                                {displayedProducts?.map((index: any, i: any) => {
-                                    return (
-                                        <SwiperSlide key={index}>
-                                            <ProductCard
-                                                key={index.id}
-                                                product={index}
-                                                loading={getImageLoadingPriority(i)}
-                                            />
-                                            <div className='py-8 cursor-pointer'></div>
-                                        </SwiperSlide>
-                                    );
-                                })}
-                            </Swiper>
-                            <div className={clsx('sm:grid justify-self-center gap-4 gap-y-10 hidden h-fit',
-                                productPerRowClasses[Math.min(productsPerRow, displayedProducts?.length || 1)]).concat(' justify-items-center')}>
-                                {displayedProducts?.map((idx: any, i: any) => (
-                                    <ProductCard
-                                        quickAdd
-                                        key={idx.id}
-                                        product={idx}
-                                        loading={getImageLoadingPriority(i)}
-                                    />
-                                ))}
-                            </div>
-                        </>)}
-                    {showViewAllLink && loaderData && loaderData.collection && (
-                        <div className='flex justify-center'>
-                            <Button to={`/collections/${loaderData.collection.handle}`} variant="outline">
-                                <span className='font-[Cormorant] text-xl'>View all</span>
-                            </Button>
-                        </div>
-                    )}
-                </div>
-            </section>
-        );
-    },
+import {forwardRef} from 'react';
+import { Section, sectionInspector, SectionProps } from '../atoms/Section';
+
+type FeaturedProductsData = SectionProps;
+
+
+const FeaturedProducts = forwardRef<HTMLElement, FeaturedProductsData>(
+  (props, ref) => {
+    let {
+      children,
+      ...rest
+    } = props;
+
+    return (
+      <Section
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Section>
+    );
+  },
 );
 
 export default FeaturedProducts;
 
-export let loader = async (args: ComponentLoaderArgs<FeaturedProductsData>) => {
-    let { weaverse, data } = args;
-    let { language, country } = weaverse.storefront.i18n;
-    if (data.products) {
-        return await weaverse.storefront.query(
-            FEATURED_PRODUCTS_QUERY,
-            {
-                variables: {
-                    handle: data.products.handle,
-                    country,
-                    language,
-                },
-            },
-        );
-    }
-    return null;
-};
 
 export let schema: HydrogenComponentSchema = {
-    type: 'featured-products',
-    title: 'Featured products',
-    inspector: [
-        {
-            group: 'Featured products',
-            inputs: [
-                {
-                    type: 'collection',
-                    name: 'products',
-                    label: 'Products',
-                },
-                {
-                    type: 'color',
-                    name: 'textColor',
-                    label: 'Text color',
-                },
-                {
-                    type: 'color',
-                    name: 'backgroundColor',
-                    label: 'Background color',
-                    defaultValue: '#F8F8F0',
-                },
-                {
-                    type: 'range',
-                    name: 'totalProduct',
-                    label: 'Total products',
-                    defaultValue: 4,
-                    configs: {
-                        min: 1,
-                        max: 24,
-                        step: 1,
-                    },
-                },
-                {
-                    type: 'range',
-                    name: 'productsPerRow',
-                    label: 'Products per row',
-                    defaultValue: 4,
-                    configs: {
-                        min: 1,
-                        max: 4,
-                        step: 1,
-                    },
-                },
-                {
-                    type: 'switch',
-                    name: 'showViewAllLink',
-                    label: 'Show “View All” link',
-                    defaultValue: true,
-                },
-                {
-                    type: 'range',
-                    name: 'topPadding',
-                    label: 'Top padding',
-                    defaultValue: 40,
-                    configs: {
-                        min: 10,
-                        max: 100,
-                        step: 1,
-                    },
-                },
-                {
-                    type: 'range',
-                    name: 'bottomPadding',
-                    label: 'Bottom padding',
-                    defaultValue: 40,
-                    configs: {
-                        min: 10,
-                        max: 100,
-                        step: 1,
-                    },
-                },
-                {
-                    type: 'switch',
-                    name: 'lazyLoadImage',
-                    label: 'Lazy load image',
-                    defaultValue: true,
-                },
-            ],
-        },
+  type: 'featured-products',
+  title: 'Featured products',
+  inspector: sectionInspector,
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+  childTypes: ['heading', 'featured-products--list'],
+  presets: {
+    children: [
+      {
+        type: 'heading',
+        content: 'Best Sellers',
+      },
+      {
+        type: 'featured-products--list',
+      }
     ],
-    toolbar: ['general-settings', ['duplicate', 'delete']],
-    childTypes: ['heading'],
-    presets: {
-        children: [
-            {
-                type: 'heading',
-                content: 'Best Sellers',
-            }
-        ],
-    },
-};
\ No newline at end of file
+  },
+};
diff --git a/app/sections/feature-product/list-products.tsx b/app/sections/feature-product/list-products.tsx
new file mode 100644
index 0000000..6cefe3c
--- /dev/null
+++ b/app/sections/feature-product/list-products.tsx
@@ -0,0 +1,224 @@
+import type {
+  ComponentLoaderArgs,
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+  WeaverseCollection,
+} from '@weaverse/hydrogen';
+import {IconImageBlank} from '~/components/Icon';
+import {FEATURED_PRODUCTS_QUERY} from '~/data/queries';
+import {CSSProperties, forwardRef} from 'react';
+import {Swiper, SwiperSlide} from 'swiper/react';
+import 'swiper/swiper-bundle.css';
+import 'swiper/css/pagination';
+import {Button} from '@/components/button';
+import {ProductCard} from '~/components/ProductCard';
+import {getImageLoadingPriority} from '~/lib/const';
+import clsx from 'clsx';
+import {Pagination} from 'swiper/modules';
+
+type FeaturedProductsData = {
+  products: WeaverseCollection;
+  textColor: string;
+  totalProduct: number;
+  productsPerRow: number;
+  showViewAllLink: boolean;
+  lazyLoadImage: boolean;
+};
+
+type FeaturedProductsProps = HydrogenComponentProps<
+  Awaited<ReturnType<typeof loader>>
+> &
+  FeaturedProductsData;
+
+let productPerRowClasses: {[item: number]: string} = {
+  1: 'sm:grid-cols-1',
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-3',
+  4: 'sm:grid-cols-4',
+};
+
+const ListProducts = forwardRef<HTMLDivElement, FeaturedProductsProps>(
+  (props, ref) => {
+    let {
+      products,
+      textColor,
+      totalProduct,
+      productsPerRow,
+      showViewAllLink,
+      lazyLoadImage,
+      loaderData,
+      ...rest
+    } = props;
+
+    let sectionStyle: CSSProperties = {
+      color: textColor,
+      '--swiper-theme-color': '#3D490B',
+    } as CSSProperties;
+    let res = loaderData?.collection?.products?.nodes;
+    let displayedProducts = res?.slice(0, totalProduct);
+    const productItemBlank = () => {
+      return (
+        <div className="flex w-full cursor-pointer flex-col gap-4">
+          <div className="flex aspect-square w-full items-center justify-center bg-background-subtle-1">
+            <IconImageBlank
+              viewBox="0 0 526 526"
+              className="h-full w-full opacity-80"
+            />
+          </div>
+          <div className="flex flex-col gap-2 px-2">
+            <p className="text-base font-normal">By vendor</p>
+            <h4 className="font-medium">Product title</h4>
+            <p className="text-base font-normal">Price</p>
+          </div>
+        </div>
+      );
+    };
+    const renderProducts = () => {
+      if (!loaderData || !displayedProducts) {
+        return Array.from({length: 4}).map((_, i) => (
+          <div key={i} className="w-full">
+            {productItemBlank()}
+          </div>
+        ));
+      } else {
+        return displayedProducts.map((product, i) => (
+          <ProductCard
+            quickAdd
+            key={product.id}
+            product={product}
+            className="h-full w-full"
+            loading={getImageLoadingPriority(i)}
+          />
+        ));
+      }
+    };
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className="flex h-full w-full justify-center"
+        style={sectionStyle}
+      >
+        <div className={clsx('flex w-full flex-col gap-12 px-4 sm:px-6')}>
+          <>
+            <div className="block sm:hidden">
+              <Swiper
+                loop={true}
+                slidesPerView={1}
+                spaceBetween={100}
+                pagination={{
+                  clickable: true,
+                }}
+                modules={[Pagination]}
+                className="w-full"
+              >
+                {renderProducts().map((product, i) => (
+                  <SwiperSlide key={i}>
+                    {product}
+                    <div className="cursor-pointer py-8"></div>
+                  </SwiperSlide>
+                ))}
+              </Swiper>
+            </div>
+            <div
+              className={clsx(
+                'hidden h-fit gap-4 gap-y-10 justify-self-center sm:grid',
+                productPerRowClasses[
+                  Math.min(productsPerRow, displayedProducts?.length || 4)
+                ],
+                'justify-items-center',
+              )}
+            >
+              {renderProducts()}
+            </div>
+          </>
+          {showViewAllLink && loaderData && loaderData.collection && (
+            <div className="flex justify-center">
+              <Button
+                to={`/collections/${loaderData.collection.handle}`}
+                variant="outline"
+              >
+                <span className="font-[Cormorant] text-xl">View all</span>
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+export default ListProducts;
+
+export let loader = async (args: ComponentLoaderArgs<FeaturedProductsData>) => {
+  let {weaverse, data} = args;
+  let {language, country} = weaverse.storefront.i18n;
+  if (data.products) {
+    return await weaverse.storefront.query(FEATURED_PRODUCTS_QUERY, {
+      variables: {
+        handle: data.products.handle,
+        country,
+        language,
+      },
+    });
+  }
+  return null;
+};
+
+export let schema: HydrogenComponentSchema = {
+  type: 'featured-products--list',
+  title: 'Featured products list',
+  limit: 1,
+  inspector: [
+    {
+      group: 'Featured products',
+      inputs: [
+        {
+          type: 'collection',
+          name: 'products',
+          label: 'Products',
+        },
+        {
+          type: 'color',
+          name: 'textColor',
+          label: 'Text color',
+        },
+        {
+          type: 'range',
+          name: 'totalProduct',
+          label: 'Total products',
+          defaultValue: 4,
+          configs: {
+            min: 1,
+            max: 24,
+            step: 1,
+          },
+        },
+        {
+          type: 'range',
+          name: 'productsPerRow',
+          label: 'Products per row',
+          defaultValue: 4,
+          configs: {
+            min: 1,
+            max: 4,
+            step: 1,
+          },
+        },
+        {
+          type: 'switch',
+          name: 'showViewAllLink',
+          label: 'Show “View All” link',
+          defaultValue: true,
+        },
+        {
+          type: 'switch',
+          name: 'lazyLoadImage',
+          label: 'Lazy load image',
+          defaultValue: true,
+        },
+      ],
+    },
+  ],
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+};
diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts
index 22c6d6d..0240333 100644
--- a/app/weaverse/components.ts
+++ b/app/weaverse/components.ts
@@ -19,7 +19,9 @@ import * as Instagram from '~/sections/instagram';
 import * as BeforeAndAfter from '~/sections/before-and-after/index';
 import * as BeforeAndAfterSlide from '~/sections/before-and-after/slider';
 import * as FeaturedProducts from '~/sections/feature-product/index';
+import * as FeaturedProductsList from '~/sections/feature-product/list-products';
 import * as CollectionList from '~/sections/collection-list/index';
+import * as CollectionListItem from '~/sections/collection-list/collection-list';
 import * as AllProducts from '~/sections/all-products/index';
 import * as ProductInformation from '~/sections/product-information/index';
 import * as HeaderImage from '~/sections/image-banner/index';
@@ -63,7 +65,9 @@ export const components: HydrogenComponent[] = [
     BeforeAndAfter,
     BeforeAndAfterSlide,
     FeaturedProducts,
+    FeaturedProductsList,
     CollectionList,
+    CollectionListItem,
     AllProducts,
     ProductInformation,
     HeaderImage,

From 6ced6d3cb0a3844b335d40c7fd2a3515869ec081 Mon Sep 17 00:00:00 2001
From: "Tuan Anh (Leo) Huynh" <huynhtuananh21895@gmail.com>
Date: Tue, 30 Jul 2024 18:36:51 +0700
Subject: [PATCH 17/17] v2.0.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fa6eadf..492020f 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
     "name": "naturelle",
     "private": true,
     "sideEffects": false,
-    "version": "2.0.2",
+    "version": "2.0.3",
     "scripts": {
         "build": "shopify hydrogen build --codegen",
         "dev": "shopify hydrogen dev --port 3456 --codegen",