mirror of
https://github.com/vercel/commerce.git
synced 2025-07-23 04:36:49 +00:00
feat: implement text/image-with-text/icon-with-text content block
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
@@ -1,8 +1,12 @@
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
import Prose from 'components/prose';
|
||||
import { getPage } from 'lib/shopify';
|
||||
import IconWithTextBlock, { IconBlockPlaceholder } from 'components/page/icon-with-text-block';
|
||||
import ImageWithTextBlock from 'components/page/image-with-text-block';
|
||||
import TextBlock from 'components/page/text-block';
|
||||
import { getPage, getPageMetaObjects } from 'lib/shopify';
|
||||
import { PageContent, PageMetafieldKey } from 'lib/shopify/types';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
@@ -26,22 +30,45 @@ export async function generateMetadata({
|
||||
};
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const contentMap: Record<PageMetafieldKey, (content: PageContent) => JSX.Element> = {
|
||||
page_icon_section: (content) => (
|
||||
<Suspense fallback={<IconBlockPlaceholder />}>
|
||||
<IconWithTextBlock content={content} />
|
||||
</Suspense>
|
||||
),
|
||||
page_image_content: (content) => <ImageWithTextBlock content={content} />,
|
||||
page_section: (content) => <TextBlock content={content} />
|
||||
};
|
||||
|
||||
export default async function Page({ params }: { params: { page: string } }) {
|
||||
const page = await getPage(params.page);
|
||||
|
||||
if (!page) return notFound();
|
||||
|
||||
const pageContents = (
|
||||
await Promise.allSettled(page.metafields.map((metafield) => getPageMetaObjects(metafield)))
|
||||
)
|
||||
.filter((result) => result.status === 'fulfilled')
|
||||
.map((result) => (result as PromiseFulfilledResult<PageContent | null>).value)
|
||||
.filter(Boolean) as PageContent[];
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
|
||||
<Prose className="mb-8" html={page.body as string} />
|
||||
<p className="text-sm italic">
|
||||
{`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
}).format(new Date(page.updatedAt))}.`}
|
||||
</p>
|
||||
<div className="mx-auto mb-2 max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
|
||||
{page.title}
|
||||
</h1>
|
||||
</div>
|
||||
<main>
|
||||
<div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col space-y-16">
|
||||
{pageContents.map((content) => (
|
||||
<div key={content.id}>{contentMap[content.key](content)}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
Reference in New Issue
Block a user