crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-12 20:57:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: split hero rendering

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-06-22 17:24:10 +07:00
parent 7015d1caef
commit b1782a4a28
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
2 changed files with 95 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/page.tsx
View File

@ -23,9 +23,7 @@ export async function generateMetadata(): Promise<Metadata> {
export default async function HomePage() { export default async function HomePage() {
return ( return (
<> <>
<Suspense> <Hero />
<Hero />
</Suspense>
<div className="flex min-h-96 flex-col"> <div className="flex min-h-96 flex-col">
<Suspense> <Suspense>
<About /> <About />

145
components/hero.tsx
View File

@ -8,62 +8,105 @@ import ImageDisplay from './page/image-display';
const { SITE_NAME } = process.env; const { SITE_NAME } = process.env;
const Hero = async () => { const Offers = async () => {
const [offers, heroImage] = await Promise.all([ const offers = await getMetaobjects('usp_item');
getMetaobjects('usp_item'),
getMetaobject({ handle: { type: 'hero', handle: `${kebabCase(SITE_NAME)}-hero` } })
]);
return ( return (
<div className="flex flex-col border-b border-gray-200 lg:border-0"> <nav aria-label="Offers" className="order-last bg-white lg:order-first">
<nav aria-label="Offers" className="order-last bg-white lg:order-first"> <div className="max-w-8xl mx-auto lg:px-8">
<div className="max-w-8xl mx-auto lg:px-8"> <ul
<ul role="list"
role="list" className="grid grid-cols-1 divide-y divide-gray-200 lg:grid-cols-4 lg:divide-x lg:divide-y-0"
className="grid grid-cols-1 divide-y divide-gray-200 lg:grid-cols-4 lg:divide-x lg:divide-y-0" >
> {offers.map((offer) => (
{offers.map((offer) => ( <li
<li key={offer.title}
key={offer.title} className="flex w-full items-center justify-start px-4 lg:justify-center"
className="flex w-full items-center justify-start px-4 lg:justify-center" >
> <DynamicHeroIcon
<DynamicHeroIcon icon={offer.icon_name as string}
icon={offer.icon_name as string} className="size-7 flex-shrink-0 text-secondary"
className="size-7 flex-shrink-0 text-secondary" />
/> <p className="px-3 py-5 text-sm font-medium text-gray-800">{offer.title}</p>
<p className="px-3 py-5 text-sm font-medium text-gray-800">{offer.title}</p> </li>
</li> ))}
))} </ul>
</ul> </div>
</div> </nav>
</nav> );
};
<div className="relative bg-gray-900"> const OffersPlaceholder = () => {
return (
<nav aria-label="Offers" className="order-last bg-white lg:order-first">
<div className="max-w-8xl mx-auto lg:px-8">
<ul
role="list"
className="grid animate-pulse grid-cols-1 divide-y divide-gray-200 py-5 lg:grid-cols-4 lg:divide-x lg:divide-y-0"
>
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
<div className="size-7 rounded bg-gray-100" />
<div className="h-7 w-1/3 rounded bg-slate-100" />
</li>
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
<div className="size-7 rounded bg-gray-100" />
<div className="h-7 w-1/3 rounded bg-slate-100" />
</li>
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
<div className="size-7 rounded bg-gray-100" />
<div className="h-7 w-1/3 rounded bg-slate-100" />
</li>
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
<div className="size-7 rounded bg-gray-100" />
<div className="h-7 w-1/3 rounded bg-slate-100" />
</li>
</ul>
</div>
</nav>
);
};
const HeroImage = async () => {
const heroImage = await getMetaobject({
handle: { type: 'hero', handle: `${kebabCase(SITE_NAME)}-hero` }
});
return heroImage ? (
<Suspense>
<ImageDisplay
fileId={heroImage.file as string}
title="Hero Image"
priority
className="h-full w-full object-cover object-center"
sizes="100vw"
width={1103}
height={626}
/>
</Suspense>
) : (
<Image
src="/hero-image.jpeg"
alt="Hero Image"
width={1103}
height={626}
priority
className="h-full w-full object-cover object-center"
sizes="100vw"
/>
);
};
const Hero = () => {
return (
<div className="flex flex-col border-b border-gray-200 lg:border-0">
<Suspense fallback={<OffersPlaceholder />}>
<Offers />
</Suspense>
<div className="relative">
{/* Decorative image and overlay */} {/* Decorative image and overlay */}
<div aria-hidden="true" className="absolute inset-0 overflow-hidden"> <div aria-hidden="true" className="absolute inset-0 overflow-hidden">
{heroImage ? ( <Suspense fallback={<div className="h-[626px] w-full" />}>
<Suspense fallback={<div className="h-[626px] w-full" />}> <HeroImage />
<ImageDisplay </Suspense>
fileId={heroImage.file as string}
title="Hero Image"
priority
className="h-full w-full object-cover object-center"
sizes="100vw"
width={1103}
height={626}
/>
</Suspense>
) : (
<Image
src="/hero-image.jpeg"
alt="Hero Image"
width={1103}
height={626}
priority
className="h-full w-full object-cover object-center"
sizes="100vw"
/>
)}
</div> </div>
<div aria-hidden="true" className="absolute inset-0 bg-dark opacity-80" /> <div aria-hidden="true" className="absolute inset-0 bg-dark opacity-80" />
<div className="flex flex-col gap-10 px-6 py-20 text-center sm:pb-56 sm:pt-32 lg:px-0"> <div className="flex flex-col gap-10 px-6 py-20 text-center sm:pb-56 sm:pt-32 lg:px-0">