admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-10-06 19:40:15 +07:00
1 parent ce4502d123
commit acee55a633
14 files changed
+634 -104
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+48 -22
View File
@@ -1132,11 +1132,49 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
const scrollLeft = () => carouselRef.current?.scrollBy({ left: -300, behavior: 'smooth' })
const scrollRight = () => carouselRef.current?.scrollBy({ left: 300, behavior: 'smooth' })
const isMinimal = cardStyle === 'minimal_swatch'
const isMinimal = cardStyle === 'minimal' || cardStyle === 'swatch' || cardStyle === 'minimal_swatch'
const containerWidth = typeof payload.containerWidth === 'string' ? payload.containerWidth : 'standard'
const cardSize = typeof payload.cardSize === 'string' ? payload.cardSize : 'medium'
const getContainerWidthClass = (width: string) => {
switch (width) {
case 'full':
return 'w-full max-w-none'
case 'wide':
return 'w-full max-w-[1600px] mx-auto'
case 'standard':
default:
return 'w-full max-w-7xl mx-auto'
}
}
const getCarouselCardWidth = () => {
switch (cardSize) {
case 'compact':
return 'w-[46vw] sm:w-[calc((100%-32px)/3)] md:w-[calc((100%-60px)/4)] lg:w-[calc((100%-100px)/6)] flex-none snap-start'
case 'large':
return 'w-[78vw] sm:w-[calc((100%-16px)/2)] md:w-[calc((100%-20px)/2)] lg:w-[calc((100%-40px)/3)] flex-none snap-start'
case 'medium':
default:
return 'w-[68vw] sm:w-[calc((100%-16px)/2)] md:w-[calc((100%-40px)/3)] lg:w-[calc((100%-60px)/4)] flex-none snap-start'
}
}
const getGridColsClass = () => {
switch (cardSize) {
case 'compact':
return 'grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6'
case 'large':
return 'grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'
case 'medium':
default:
return 'grid grid-cols-2 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
}
}
return (
<section className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
<div className="ui-section-shell space-y-8">
<section className={`overflow-hidden bg-surface-page px-4 sm:px-6 md:px-8 ${getSectionPaddingClasses(payload)}`}>
<div className={`${getContainerWidthClass(containerWidth)} space-y-8`}>
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between border-b border-line-primary/10 pb-5">
<div className="flex flex-col md:flex-row md:items-baseline md:gap-4">
<h2 className={isMinimal ? "text-2xl md:text-3xl font-serif text-text-main tracking-tight" : "ui-section-title"}>
@@ -1168,17 +1206,9 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
{products.map((product) => (
<div
key={product.id}
className={
isMinimal
? "w-[42vw] sm:w-[200px] md:w-[220px] lg:w-[240px] flex-none snap-start"
: "w-[85vw] sm:w-[300px] flex-none snap-start"
}
className={getCarouselCardWidth()}
>
{isMinimal ? (
<ProductSwatchCard product={product} badgeText={badgeText} />
) : (
<ProductCard product={product} />
)}
<ProductCard product={product} cardStyle={cardStyle as any} badgeText={badgeText} />
</div>
))}
</div>
@@ -1191,14 +1221,10 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
</button>
</div>
) : (
<div className={isMinimal ? "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6" : "grid grid-cols-1 gap-8 md:grid-cols-3"}>
{products.map((product) =>
isMinimal ? (
<ProductSwatchCard key={product.id} product={product} badgeText={badgeText} />
) : (
<ProductCard key={product.id} product={product} />
)
)}
<div className={getGridColsClass()}>
{products.map((product) => (
<ProductCard key={product.id} product={product} cardStyle={cardStyle as any} badgeText={badgeText} />
))}
</div>
)
) : (
@@ -2595,7 +2621,7 @@ export default function DynamicPageRenderer({ sections, categories, lang: langPr
case 'PRODUCT_CAROUSEL':
return (
<ScrollReveal key={section.id}>
<ProductsSection payload={{ ...payload, layout: 'carousel' }} lang={lang} />
<ProductsSection payload={{ layout: 'carousel', ...payload }} lang={lang} />
</ScrollReveal>
)
case 'BANNER':