x
This commit is contained in:
Your Name committed
1 parent
641cc4e42b
commit
46968782b6
17 files changed
+265
-30
No files matched your search
@@ -64,6 +64,39 @@ function renderAccentTitle(text: string, accentClassName = 'ui-accent-text') {
|
||||
|
||||
|
||||
|
||||
export function getSectionPaddingClasses(
|
||||
payload?: Record<string, unknown>,
|
||||
fallback: 'normal' | 'none' | 'compact' | 'spacious' = 'normal',
|
||||
) {
|
||||
const padTop = (typeof payload?.paddingTop === 'string'
|
||||
? payload.paddingTop
|
||||
: (typeof payload?.sectionPadding === 'string' ? payload.sectionPadding : fallback)) as string
|
||||
|
||||
const padBottom = (typeof payload?.paddingBottom === 'string'
|
||||
? payload.paddingBottom
|
||||
: (typeof payload?.sectionPadding === 'string' ? payload.sectionPadding : fallback)) as string
|
||||
|
||||
const getPt = (p: string) => {
|
||||
switch (p) {
|
||||
case 'none': return 'pt-0'
|
||||
case 'compact': return 'pt-6 md:pt-10'
|
||||
case 'spacious': return 'pt-20 md:pt-28'
|
||||
case 'normal': default: return 'pt-10 md:pt-16'
|
||||
}
|
||||
}
|
||||
|
||||
const getPb = (p: string) => {
|
||||
switch (p) {
|
||||
case 'none': return 'pb-0'
|
||||
case 'compact': return 'pb-6 md:pb-10'
|
||||
case 'spacious': return 'pb-20 md:pb-28'
|
||||
case 'normal': default: return 'pb-10 md:pb-16'
|
||||
}
|
||||
}
|
||||
|
||||
return `px-6 ${getPt(padTop)} ${getPb(padBottom)}`
|
||||
}
|
||||
|
||||
function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const i18nLang = useLang()
|
||||
const resolvedLang = lang === 'all' ? i18nLang : lang
|
||||
@@ -1040,7 +1073,7 @@ function CategoriesSection({
|
||||
const displayed = categoryIds.length ? sourceCategories.filter((category) => categoryIds.includes(category.id)) : sourceCategories
|
||||
|
||||
return (
|
||||
<section id="categories" className="bg-surface-page ui-section-band">
|
||||
<section id="categories" className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="ui-section-shell space-y-14">
|
||||
<div className="mx-auto max-w-2xl space-y-4 text-center">
|
||||
<h2 className="ui-section-title">{title}</h2>
|
||||
@@ -1095,7 +1128,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
|
||||
const scrollRight = () => carouselRef.current?.scrollBy({ left: 300, behavior: 'smooth' })
|
||||
|
||||
return (
|
||||
<section className="bg-surface-page ui-section-band">
|
||||
<section className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="ui-section-shell space-y-10">
|
||||
<div className="flex flex-col gap-4 border-b border-line-primary/20 pb-6 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
@@ -1196,7 +1229,7 @@ function BannerSection({ payload, lang }: { payload: Record<string, unknown>, la
|
||||
</div>
|
||||
)
|
||||
|
||||
return <section className="bg-surface-page ui-section-band">{linkUrl ? <Link href={linkUrl}>{content}</Link> : content}</section>
|
||||
return <section className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>{linkUrl ? <Link href={linkUrl}>{content}</Link> : content}</section>
|
||||
}
|
||||
|
||||
function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
@@ -1211,7 +1244,7 @@ function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang
|
||||
: 'text-left'
|
||||
|
||||
return (
|
||||
<section className="bg-surface-page ui-section-band">
|
||||
<section className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className={`mx-auto max-w-4xl space-y-6 ${alignClass}`}>
|
||||
{title && <h2 className="text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>}
|
||||
{content && <div className="leading-relaxed text-muted-text" dangerouslySetInnerHTML={{ __html: content }} />}
|
||||
@@ -1234,7 +1267,7 @@ function ArticleHeaderSection({ payload, lang }: { payload: Record<string, unkno
|
||||
if (!title) return null
|
||||
|
||||
return (
|
||||
<header className="bg-surface-page ui-section-band">
|
||||
<header className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
{category && <p className="mb-4 text-sm font-semibold uppercase text-brand-primary">{category}</p>}
|
||||
@@ -1312,7 +1345,7 @@ function ArticleMediaSection({ payload, lang }: { payload: Record<string, unknow
|
||||
) : null
|
||||
|
||||
return (
|
||||
<section className={`${backgroundClass} ui-section-band`}>
|
||||
<section className={`${backgroundClass} ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className={`mx-auto ${widthClass}`}>
|
||||
{!media ? copy : imagePosition === 'top' ? (
|
||||
<div className="space-y-8">
|
||||
@@ -1344,7 +1377,7 @@ function ArticleGallerySection({ payload, lang }: { payload: Record<string, unkn
|
||||
if (images.length < 2) return null
|
||||
|
||||
return (
|
||||
<section className="bg-surface-page ui-section-band">
|
||||
<section className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="mx-auto max-w-7xl">
|
||||
{title && <h2 className="mb-8 text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>}
|
||||
<div className={featured ? 'grid gap-4 md:grid-cols-2' : 'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'}>
|
||||
@@ -1378,7 +1411,7 @@ function ArticleFactsSection({ payload, lang }: { payload: Record<string, unknow
|
||||
if (items.length === 0) return null
|
||||
|
||||
return (
|
||||
<section className="bg-surface-card ui-section-band">
|
||||
<section className={`bg-surface-card ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="mx-auto max-w-6xl">
|
||||
{title && <h2 className="mb-8 text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>}
|
||||
<dl className="grid gap-x-10 gap-y-8 md:grid-cols-2">
|
||||
@@ -1430,7 +1463,7 @@ function ArticleVideoSection({ payload, lang }: { payload: Record<string, unknow
|
||||
if (!videoUrl) return null
|
||||
|
||||
return (
|
||||
<section className="bg-surface-page ui-section-band">
|
||||
<section className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="mx-auto max-w-6xl">
|
||||
{title && <h2 className="mb-8 text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>}
|
||||
<div className={`${aspectClass} overflow-hidden rounded-lg bg-text-main`}>
|
||||
@@ -1461,7 +1494,7 @@ function ArticleReferencesSection({ payload, lang }: { payload: Record<string, u
|
||||
if (items.length === 0) return null
|
||||
|
||||
return (
|
||||
<section className="bg-surface-page ui-section-band">
|
||||
<section className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<h2 className="mb-6 text-2xl font-semibold text-text-main">{title || 'References'}</h2>
|
||||
<ol className="list-decimal space-y-4 pl-5 text-muted-text">
|
||||
@@ -1498,7 +1531,7 @@ function ArticleTableSection({ payload, lang }: { payload: Record<string, unknow
|
||||
if (columns.length < 2 || rows.length === 0) return null
|
||||
|
||||
return (
|
||||
<section className="bg-surface-page ui-section-band">
|
||||
<section className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="mx-auto max-w-6xl">
|
||||
{title && <h2 className="mb-8 text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>}
|
||||
<div className="overflow-x-auto rounded-lg border border-line-primary/20">
|
||||
@@ -1549,7 +1582,7 @@ function ArticleDownloadSection({ payload, lang }: { payload: Record<string, unk
|
||||
if (files.length === 0) return null
|
||||
|
||||
return (
|
||||
<section className="bg-surface-card ui-section-band">
|
||||
<section className={`bg-surface-card ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="mx-auto max-w-5xl">
|
||||
{title && <h2 className="text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>}
|
||||
{description && <p className="mt-4 max-w-3xl leading-7 text-muted-text">{description}</p>}
|
||||
@@ -1594,7 +1627,7 @@ function ArticleCtaSection({ payload, lang }: { payload: Record<string, unknown>
|
||||
const secondaryClass = "inline-flex min-h-12 items-center justify-center rounded-lg border border-line-primary px-6 py-3 font-semibold text-text-main transition-colors hover:bg-surface-page"
|
||||
|
||||
return (
|
||||
<section className="bg-surface-card ui-section-band">
|
||||
<section className={`bg-surface-card ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className={`mx-auto max-w-5xl ${centered ? 'text-center' : 'text-left'}`}>
|
||||
<h2 className="text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>
|
||||
{description && <p className={`mt-4 max-w-2xl leading-7 text-muted-text ${centered ? 'mx-auto' : ''}`}>{description}</p>}
|
||||
@@ -1663,7 +1696,7 @@ function EditorialTileSection({ payload, lang }: { payload: Record<string, unkno
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="overflow-hidden bg-surface-page ui-section-band" style={{ backgroundColor, color: textColor }}>
|
||||
<section className={`overflow-hidden bg-surface-page ${getSectionPaddingClasses(payload)}`} style={{ backgroundColor, color: textColor }}>
|
||||
<div className="mx-auto grid max-w-7xl gap-12 md:grid-cols-2 md:items-center">
|
||||
{imageUrl && (
|
||||
<div className={`group relative ${getAspectClass(imageAspectRatio)} overflow-hidden rounded-3xl shadow-card ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
|
||||
@@ -2115,7 +2148,7 @@ function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string,
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="bg-surface-page ui-section-band">
|
||||
<section className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="mx-auto max-w-6xl space-y-12 text-center">
|
||||
<div className="mx-auto max-w-3xl space-y-4">
|
||||
<h2 className="ui-section-title">{title}</h2>
|
||||
@@ -2143,7 +2176,7 @@ function QuoteCalloutSection({ payload, lang }: { payload: Record<string, unknow
|
||||
if (!quote) return null
|
||||
|
||||
return (
|
||||
<section className="bg-surface-page px-6 py-24">
|
||||
<section className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<p className="mb-8 text-7xl leading-none text-brand-primary/25">"</p>
|
||||
<blockquote className="text-3xl font-semibold italic leading-relaxed text-text-main md:text-5xl">
|
||||
@@ -2170,7 +2203,7 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
|
||||
const iconColor = typeof payload.iconColor === 'string' ? payload.iconColor : undefined
|
||||
|
||||
return (
|
||||
<section className="ui-section-band" style={{ backgroundColor, color: textColor }}>
|
||||
<section className={`${getSectionPaddingClasses(payload)}`} style={{ backgroundColor, color: textColor }}>
|
||||
<div className="mx-auto max-w-4xl space-y-10">
|
||||
{sectionTitle && <h2 className="ui-section-title">{sectionTitle}</h2>}
|
||||
{categories.map((category, categoryIndex) => {
|
||||
@@ -2228,7 +2261,7 @@ function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown
|
||||
] as const
|
||||
|
||||
return (
|
||||
<section className="bg-surface-page ui-section-band">
|
||||
<section className={`bg-surface-page ${getSectionPaddingClasses(payload)}`}>
|
||||
<div className="mx-auto grid max-w-6xl gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
{title && (
|
||||
<div className="col-span-full mb-2">
|
||||
|
||||
Reference in new issue
Block a user