From 02f02ed58e497edfe3f69ddf00967a6bef4e5adc Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 23 Aug 2024 17:28:30 +0700 Subject: [PATCH 01/16] Add global loading --- app/components/global-loading.tsx | 47 +++++++++++++++++++++++++++++++ app/root.tsx | 2 ++ 2 files changed, 49 insertions(+) create mode 100644 app/components/global-loading.tsx diff --git a/app/components/global-loading.tsx b/app/components/global-loading.tsx new file mode 100644 index 0000000..80f2d4c --- /dev/null +++ b/app/components/global-loading.tsx @@ -0,0 +1,47 @@ +import { useNavigation } from "@remix-run/react"; +import clsx from "clsx"; +import { useEffect, useRef, useState } from "react"; + +export function GlobalLoading() { + let transition = useNavigation(); + let active = transition.state !== "idle"; + + let ref = useRef(null); + let [animating, setAnimating] = useState(false); + + useEffect(() => { + if (!ref.current) return; + + Promise.allSettled( + ref.current.getAnimations().map(({ finished }) => finished), + ).then(() => { + if (!active) setAnimating(false); + }); + + if (active) { + let id = setTimeout(() => setAnimating(true), 100); + return () => clearTimeout(id); + } + }, [active]); + + return ( +
+ role="progressbar" + aria-hidden={!active} + aria-valuetext={active ? "Loading" : undefined} + className="fixed inset-x-0 left-0 top-0 z-50 h-1 animate-pulse" + > +
+
+ ); +} diff --git a/app/root.tsx b/app/root.tsx index b8a95f3..80d94ad 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -34,6 +34,7 @@ import {CustomAnalytics} from '~/components/Analytics'; import {seoPayload} from '~/lib/seo.server'; import {getErrorMessage} from './lib/defineMessageError'; import {parseMenu} from './lib/utils'; +import { GlobalLoading } from './components/global-loading'; /** * This is important to avoid re-fetching root queries on sub-navigations @@ -171,6 +172,7 @@ function IndexLayout({children}: {children?: React.ReactNode}) { ) : ( children )} + From 223f9e5d8add8f8a056f25322ae33e724bae5121 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 23 Aug 2024 17:28:51 +0700 Subject: [PATCH 02/16] update style drawer --- app/components/Drawer.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/app/components/Drawer.tsx b/app/components/Drawer.tsx index e6288ca..60fde8c 100644 --- a/app/components/Drawer.tsx +++ b/app/components/Drawer.tsx @@ -83,7 +83,7 @@ export function Drawer({
- - {heading} - + {heading} )}
From c5e4d27d95e7bc332bf027ee9b52bcd246784341 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 23 Aug 2024 17:29:08 +0700 Subject: [PATCH 03/16] update icon list menu --- app/components/Icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/Icon.tsx b/app/components/Icon.tsx index fccee71..110dba4 100644 --- a/app/components/Icon.tsx +++ b/app/components/Icon.tsx @@ -606,7 +606,7 @@ export function IconTag(props: IconProps) { export function IconListMenu(props: IconProps){ return( - + ); } From 4dde61baf514fe20a583c8fdb2da186650d3df96 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 23 Aug 2024 17:29:46 +0700 Subject: [PATCH 04/16] change icon list menu --- app/components/Header/MenuDrawerHeader.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/app/components/Header/MenuDrawerHeader.tsx b/app/components/Header/MenuDrawerHeader.tsx index f4425ef..82de667 100644 --- a/app/components/Header/MenuDrawerHeader.tsx +++ b/app/components/Header/MenuDrawerHeader.tsx @@ -11,7 +11,7 @@ import {CartApiQueryFragment} from 'storefrontapi.generated'; import {CartMain} from '../Cart'; import {CartLoading} from '../CartLoading'; import {Drawer, useDrawer} from '../Drawer'; -import {IconAccount, IconLogin} from '../Icon'; +import {IconAccount, IconListMenu, IconLogin} from '../Icon'; import {Link} from '../Link'; import {Logo} from '../Logo'; import {CartCount} from './CartCount'; @@ -115,23 +115,15 @@ function HeaderMenuDrawer({menu}: {menu?: EnhancedMenu | null | undefined}) { role="navigation" > - {/* */} From 01a3f2ae1a80cf1ded3b291f2f1cc73de293ce1a Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 23 Aug 2024 17:30:20 +0700 Subject: [PATCH 05/16] fix typo --- app/weaverse/schema.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/weaverse/schema.ts b/app/weaverse/schema.ts index f1da824..90b69bf 100644 --- a/app/weaverse/schema.ts +++ b/app/weaverse/schema.ts @@ -236,7 +236,7 @@ export const themeSchema: HydrogenThemeSchema = { ], }, { - group: 'footer settings', + group: 'Footer', inputs: [ { type: 'text', From 9284a1a3e1a952a33a37a2fa8d5eeadc5b36fc68 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 23 Aug 2024 17:30:45 +0700 Subject: [PATCH 06/16] update logic search --- app/components/Header/SearchToggle.tsx | 2 +- .../PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/Header/SearchToggle.tsx b/app/components/Header/SearchToggle.tsx index e529ac2..fb518af 100644 --- a/app/components/Header/SearchToggle.tsx +++ b/app/components/Header/SearchToggle.tsx @@ -47,7 +47,7 @@ export function SearchToggle({isOpenDrawerHearder}: {isOpenDrawerHearder?: boole open={isOpen} onClose={closeDrawer} openFrom={openFrom} - heading="Search" + heading={settings?.searchType === 'drawerSearch' ? 'Search' : ''} isForm="search" > {searchType === 'popupSearch' && } diff --git a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx index 68e0d25..383bb32 100644 --- a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx +++ b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx @@ -83,12 +83,13 @@ export function SearchTypeDrawerResults() { />
)} -
+
{searchTerm.current && (

Show All Results ({totalResultsCount}) From 0d3815e477fe08e145ddae746e63a8648b9bbf74 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 23 Aug 2024 17:31:30 +0700 Subject: [PATCH 07/16] update style and add setting for blog section --- app/sections/blogs/index.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/app/sections/blogs/index.tsx b/app/sections/blogs/index.tsx index cf057fa..e508a7f 100644 --- a/app/sections/blogs/index.tsx +++ b/app/sections/blogs/index.tsx @@ -77,6 +77,7 @@ type BlogData = { blogs: WeaverseBlog; backgroundColor: string; articlePerRow: number; + gapRow: number; showSeperator: boolean; as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; minSize?: number; @@ -101,6 +102,7 @@ const Blogs = forwardRef((props, ref) => { blogs, backgroundColor, articlePerRow, + gapRow, showSeperator, as: Tag = 'h4', size, @@ -119,6 +121,7 @@ const Blogs = forwardRef((props, ref) => { '--min-size-px': `${minSize}px`, '--min-size': minSize, '--max-size': maxSize, + '--gap-row': `${gapRow}px`, } as CSSProperties; const defaultArticles = Array.from({length: 3}).map((_, i) => ({ @@ -143,7 +146,7 @@ const Blogs = forwardRef((props, ref) => { {children}

@@ -155,7 +158,7 @@ const Blogs = forwardRef((props, ref) => { >
{idx.image ? ( Date: Fri, 23 Aug 2024 17:31:48 +0700 Subject: [PATCH 08/16] refactor collection filter --- app/sections/collection-filters/index.tsx | 87 +++++++++++++++++++---- 1 file changed, 72 insertions(+), 15 deletions(-) diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx index 3bd4afb..c754c5f 100644 --- a/app/sections/collection-filters/index.tsx +++ b/app/sections/collection-filters/index.tsx @@ -4,20 +4,53 @@ import type {Filter} from '@shopify/hydrogen/storefront-api-types'; import type { HydrogenComponentSchema, } from '@weaverse/hydrogen'; -import {Button} from '~/components/Button'; import {DrawerFilter} from '~/components/DrawerFilter'; import type {AppliedFilter} from '~/lib/filter'; import {forwardRef} from 'react'; import {useInView} from 'react-intersection-observer'; import type {CollectionDetailsQuery} from 'storefrontapi.generated'; -import {layoutInputs, Section, SectionProps} from '../atoms/Section'; import {ProductsLoadedOnScroll} from './products-loaded-on-scroll'; +import { Button } from '@/components/button'; +import { cva, VariantProps } from 'class-variance-authority'; +import { cn } from '@/lib/utils'; -type CollectionFiltersProps = SectionProps; +interface CollectionFiltersProps extends VariantProps {}; +let variants = cva("relative lg:pb-20 pb-12", { + variants: { + width: { + full: "w-full h-full", + stretch: "w-full h-full", + fixed: "w-full h-full max-w-[var(--page-width,1440px)] mx-auto", + }, + padding: { + full: "", + stretch: "px-3 md:px-10 lg:px-16", + fixed: "px-3 md:px-4 lg:px-6 mx-auto", + }, + gap: { + 0: "", + 4: "space-y-1", + 8: "space-y-2", + 12: "space-y-3", + 16: "space-y-4", + 20: "space-y-5", + 24: "space-y-3 lg:space-y-6", + 28: "space-y-3.5 lg:space-y-7", + 32: "space-y-4 lg:space-y-8", + 36: "space-y-4 lg:space-y-9", + 40: "space-y-5 lg:space-y-10", + 44: "space-y-5 lg:space-y-11", + 48: "space-y-6 lg:space-y-12", + 52: "space-y-6 lg:space-y-[52px]", + 56: "space-y-7 lg:space-y-14", + 60: "space-y-7 lg:space-y-[60px]", + }, + }, +}); let CollectionFilters = forwardRef( (props, sectionRef) => { - let {children, ...rest} = props; + let {width, gap, ...rest} = props; let {ref, inView} = useInView(); let {collection, collections, appliedFilters} = useLoaderData< CollectionDetailsQuery & { @@ -30,7 +63,7 @@ let CollectionFilters = forwardRef( if (collection?.products && collections) { return ( -
+
( state, }) => ( <> -
-
( hasNextPage={hasNextPage} state={state} /> -
-
)} -
+
); } return
; @@ -88,9 +121,33 @@ export let schema: HydrogenComponentSchema = { inspector: [ { group: 'Collection filters', - inputs: layoutInputs.filter( - ({name}) => name !== 'divider' && name !== 'borderRadius', - ), + inputs: [ + { + type: "select", + name: "width", + label: "Content width", + configs: { + options: [ + { value: "full", label: "Full page" }, + { value: "stretch", label: "Stretch" }, + { value: "fixed", label: "Fixed" }, + ], + }, + defaultValue: "fixed", + }, + { + type: "range", + name: "gap", + label: "Items spacing", + configs: { + min: 0, + max: 60, + step: 4, + unit: "px", + }, + defaultValue: 20, + }, + ] }, ], }; From 72d357b9fb29e913d974ebc68351acf4956beaf8 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 23 Aug 2024 17:32:08 +0700 Subject: [PATCH 09/16] update heading style hightlight section --- app/sections/hightlight/item.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/sections/hightlight/item.tsx b/app/sections/hightlight/item.tsx index 5962ad1..a29d929 100644 --- a/app/sections/hightlight/item.tsx +++ b/app/sections/hightlight/item.tsx @@ -30,10 +30,10 @@ const HighlightItem = forwardRef( > {React.Children.map(children, (child, index) => ( <> -
+
{index === 0 && (
- + {(parentInstance?._store?.children as { id: string }[])?.findIndex((c) => c.id === child?.props.parentId) + 1}
From 2c7d186cc78e72496985adcae48412ab9be40bbd Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Thu, 29 Aug 2024 16:52:24 +0700 Subject: [PATCH 10/16] fix supports weights for tags heading --- app/styles/tailwind.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css index 1157c18..8c5b050 100644 --- a/app/styles/tailwind.css +++ b/app/styles/tailwind.css @@ -2,6 +2,7 @@ @import 'swiper/css'; @import 'swiper/swiper-bundle.css'; @import 'swiper/css/pagination'; +@import '@fontsource-variable/cormorant'; @tailwind base; @tailwind components; @tailwind utilities; From bf059d481f446d16d593613dfe28ff78fdbad149 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Thu, 29 Aug 2024 16:52:54 +0700 Subject: [PATCH 11/16] update font nunito sans for body --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 76c7975..fb5abe5 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ }, "dependencies": { "@fontsource-variable/cormorant": "^5.0.14", + "@fontsource-variable/nunito-sans": "^5.0.15", "@fontsource-variable/open-sans": "^5.0.29", "@headlessui/react": "^2.1.2", "@radix-ui/react-checkbox": "^1.1.1", From b4295fab53b99e40aa9257db2eb67d73c38aff96 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Thu, 29 Aug 2024 16:53:26 +0700 Subject: [PATCH 12/16] update style and clean code footer --- app/components/Footer.tsx | 100 +------------------------------------- 1 file changed, 2 insertions(+), 98 deletions(-) diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx index 72bf779..aef904a 100644 --- a/app/components/Footer.tsx +++ b/app/components/Footer.tsx @@ -103,7 +103,7 @@ function MenuLink(props: SingleMenuItem) { <>

- {title} + {title}

    {items.map((subItem, ind) => ( @@ -160,101 +160,5 @@ function MenuLink(props: SingleMenuItem) { } function HeaderText({title, to}: {title: string; to: string}) { - return

    {title}

    ; -} - -// function FooterMenu({ -// menu, -// primaryDomainUrl, -// }: { -// menu: FooterQuery['menu']; -// primaryDomainUrl: FooterQuery['shop']['primaryDomain']['url']; -// }) { -// const {publicStoreDomain} = useRootLoaderData(); - -// return ( -// -// ); -// } - -const FALLBACK_FOOTER_MENU = { - id: 'gid://shopify/Menu/199655620664', - items: [ - { - id: 'gid://shopify/MenuItem/461633060920', - resourceId: 'gid://shopify/ShopPolicy/23358046264', - tags: [], - title: 'Privacy Policy', - type: 'SHOP_POLICY', - url: '/policies/privacy-policy', - items: [], - }, - { - id: 'gid://shopify/MenuItem/461633093688', - resourceId: 'gid://shopify/ShopPolicy/23358013496', - tags: [], - title: 'Refund Policy', - type: 'SHOP_POLICY', - url: '/policies/refund-policy', - items: [], - }, - { - id: 'gid://shopify/MenuItem/461633126456', - resourceId: 'gid://shopify/ShopPolicy/23358111800', - tags: [], - title: 'Shipping Policy', - type: 'SHOP_POLICY', - url: '/policies/shipping-policy', - items: [], - }, - { - id: 'gid://shopify/MenuItem/461633159224', - resourceId: 'gid://shopify/ShopPolicy/23358079032', - tags: [], - title: 'Terms of Service', - type: 'SHOP_POLICY', - url: '/policies/terms-of-service', - items: [], - }, - ], -}; - -function activeLinkStyle({ - isActive, - isPending, -}: { - isActive: boolean; - isPending: boolean; -}) { - return { - fontWeight: isActive ? 'bold' : undefined, - color: isPending ? 'grey' : 'white', - }; + return

    {title}

    ; } From d332287ddd54bb8dd02367200c6e2717f12ab101 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Thu, 29 Aug 2024 17:54:39 +0700 Subject: [PATCH 13/16] update layout allproducts --- app/sections/all-products/index.tsx | 179 ++++++++++------------------ 1 file changed, 60 insertions(+), 119 deletions(-) diff --git a/app/sections/all-products/index.tsx b/app/sections/all-products/index.tsx index ab8feae..06a6a67 100644 --- a/app/sections/all-products/index.tsx +++ b/app/sections/all-products/index.tsx @@ -1,89 +1,69 @@ +import {Button} from '@/components/button'; import {useLoaderData} from '@remix-run/react'; import {Pagination} from '@shopify/hydrogen'; import type { HydrogenComponentProps, HydrogenComponentSchema, } from '@weaverse/hydrogen'; -import {Children, forwardRef} from 'react'; -import type {AllProductsQuery} from 'storefrontapi.generated'; -import { Section} from '~/components/Text'; -import {ProductCard} from '~/components/ProductCard'; import {Grid} from '~/components/Grid'; +import {ProductCard} from '~/components/ProductCard'; import {getImageLoadingPriority} from '~/lib/const'; -import { Button } from '@/components/button'; +import {Children, forwardRef} from 'react'; +import type {AllProductsQuery} from 'storefrontapi.generated'; +import {layoutInputs, Section, SectionProps} from '../atoms/Section'; interface AllProductsProps extends HydrogenComponentProps { heading: string; - prevPageText: string; - nextPageText: string; - paddingTop: number; - paddingBottom: number; } -let AllProducts = forwardRef((props, ref) => { - let { - heading, - prevPageText, - nextPageText, - paddingTop, - paddingBottom, - children, - ...rest - } = props; - let {products} = useLoaderData(); +let AllProducts = forwardRef( + (props, ref) => { + let {heading, children, ...rest} = props; + let {products} = useLoaderData(); - return ( -
    -
    - {!!Children.count(children) && ( -
    - {children} -
    - )} - - {({nodes, isLoading, NextLink, PreviousLink}) => { - let itemsMarkup = nodes.map((product, i) => ( - - )); + return ( +
    + {!!Children.count(children) && ( +
    {children}
    + )} + + {({nodes, isLoading, NextLink, PreviousLink}) => { + let itemsMarkup = nodes.map((product, i) => ( + + )); - return ( - <> -
    - -
    - {itemsMarkup} -
    - -
    - - ); - }} -     -
    -
    - ); -}); + return ( + <> +
    + +
    + + {itemsMarkup} + +
    + +
    + + ); + }} + +
+ ); + }, +); export default AllProducts; @@ -98,55 +78,16 @@ export let schema: HydrogenComponentSchema = { inspector: [ { group: 'All products', - inputs: [ - { - type: 'text', - name: 'prevPageText', - label: 'Previous page text', - defaultValue: 'Previous', - placeholder: 'Previous', - }, - { - type: 'text', - name: 'nextPageText', - label: 'Next page text', - defaultValue: 'Next', - placeholder: 'Next', - }, - { - type: 'range', - label: 'Top padding', - name: 'paddingTop', - configs: { - min: 0, - max: 100, - step: 4, - unit: 'px', - }, - defaultValue: 32, - }, - { - type: 'range', - label: 'Bottom padding', - name: 'paddingBottom', - configs: { - min: 0, - max: 100, - step: 4, - unit: 'px', - }, - defaultValue: 32, - }, - ], + inputs: layoutInputs.filter(({ name }) => name !== 'borderRadius'), }, ], childTypes: ['heading'], - presets: { - children: [ - { - type: 'heading', - content: "All products", - }, - ], - }, + presets: { + children: [ + { + type: 'heading', + content: 'All products', + }, + ], + }, }; From 83fa7aaba544fcd1bd214b48a19ae6c7ce1e0403 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Thu, 29 Aug 2024 17:55:55 +0700 Subject: [PATCH 14/16] fix bug slide product media --- app/components/product-form/product-media.tsx | 80 ++++++++++--------- 1 file changed, 42 insertions(+), 38 deletions(-) diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx index c82243a..aa63212 100644 --- a/app/components/product-form/product-media.tsx +++ b/app/components/product-form/product-media.tsx @@ -1,12 +1,9 @@ import { Image } from "@shopify/hydrogen"; import clsx from "clsx"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import type { MediaFragment } from "storefrontapi.generated"; import { FreeMode, Pagination, Thumbs } from "swiper/modules"; import { Swiper, type SwiperClass, SwiperSlide } from "swiper/react"; -import 'swiper/css/free-mode'; -import 'swiper/css/navigation'; -import 'swiper/css/thumbs'; interface ProductMediaProps { selectedVariant: any; @@ -21,43 +18,23 @@ export function ProductMedia(props: ProductMediaProps) { let media = _media.filter((med) => med.__typename === "MediaImage"); let [thumbsSwiper, setThumbsSwiper] = useState(null); let [activeIndex, setActiveIndex] = useState(0); + console.log("🚀 ~ thumbsSwiper:", thumbsSwiper) + + useEffect(() => { + if (thumbsSwiper) { + thumbsSwiper.slideTo(activeIndex); + } + }, [thumbsSwiper]); return ( -
- - {media.map((med, i) => { - let image = { ...med.image, altText: med.alt || "Product image" }; - return ( - - - - ); - })} - +
{ + setActiveIndex(swiper.activeIndex); + }} thumbs={ thumbsSwiper ? { @@ -66,9 +43,6 @@ export function ProductMedia(props: ProductMediaProps) { } : undefined } - onSlideChange={(swiper) => { - setActiveIndex(swiper.activeIndex); - }} className="vt-product-image max-w-full pb-14 md:pb-0 md:[&_.swiper-pagination-fraction]:hidden" style={ { @@ -91,6 +65,36 @@ export function ProductMedia(props: ProductMediaProps) { ); })} + + {media.map((med, i) => { + let image = { ...med.image, altText: med.alt || "Product image" }; + return ( + + + + ); + })} +
); } From 77fd536b9bcd72b2a6704c7795b988881f67a61a Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Thu, 29 Aug 2024 17:56:45 +0700 Subject: [PATCH 15/16] update setting article section --- app/sections/blog-post/blog-post.tsx | 44 ++++------------------------ 1 file changed, 6 insertions(+), 38 deletions(-) diff --git a/app/sections/blog-post/blog-post.tsx b/app/sections/blog-post/blog-post.tsx index 9f06d97..f16e6be 100644 --- a/app/sections/blog-post/blog-post.tsx +++ b/app/sections/blog-post/blog-post.tsx @@ -2,18 +2,15 @@ import {useLoaderData} from '@remix-run/react'; import {Image} from '@shopify/hydrogen'; import type {Article} from '@shopify/hydrogen/storefront-api-types'; import type { - HydrogenComponentProps, HydrogenComponentSchema, } from '@weaverse/hydrogen'; import {forwardRef} from 'react'; +import { layoutInputs, Section, SectionProps } from '../atoms/Section'; -interface BlogPostProps extends HydrogenComponentProps { - paddingTop: number; - paddingBottom: number; -} +type BlogPostProps = SectionProps; let BlogPost = forwardRef((props, ref) => { - let {paddingTop, paddingBottom, ...rest} = props; + let { ...rest} = props; let {article, formattedDate} = useLoaderData<{ article: Article; formattedDate: string; @@ -21,12 +18,8 @@ let BlogPost = forwardRef((props, ref) => { let {title, image, contentHtml, author, tags} = article; if (article) { return ( -
+
@@ -46,7 +39,7 @@ let BlogPost = forwardRef((props, ref) => {

{formattedDate}

-
+
); } return
; @@ -65,32 +58,7 @@ export let schema: HydrogenComponentSchema = { inspector: [ { group: 'Blog post', - inputs: [ - { - type: 'range', - label: 'Top padding', - name: 'paddingTop', - configs: { - min: 0, - max: 100, - step: 4, - unit: 'px', - }, - defaultValue: 0, - }, - { - type: 'range', - label: 'Bottom padding', - name: 'paddingBottom', - configs: { - min: 0, - max: 100, - step: 4, - unit: 'px', - }, - defaultValue: 0, - }, - ], + inputs: layoutInputs.filter(({ name }) => name !== 'divider' && name !== 'borderRadius'), }, ], }; From f5e6b328642303a77a9a013b13e82987010b2fc8 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Thu, 29 Aug 2024 17:57:15 +0700 Subject: [PATCH 16/16] update mobile scrolling text --- app/sections/scrolling-text/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/sections/scrolling-text/index.tsx b/app/sections/scrolling-text/index.tsx index d70bfc8..2158b16 100644 --- a/app/sections/scrolling-text/index.tsx +++ b/app/sections/scrolling-text/index.tsx @@ -55,7 +55,8 @@ const ScrollingText = forwardRef((props, ref) => { !visibleOnMobile && 'hidden sm:block', )} > -
    +
    {content}
    +
      {Array.from({length: 50}).map((_, i) => (