-
- {children}
-
+ <>
+
-
-
+
+
+
+
);
}
diff --git a/app/[page]/page.tsx b/app/[page]/page.tsx
index c21525502..c173ef197 100644
--- a/app/[page]/page.tsx
+++ b/app/[page]/page.tsx
@@ -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
JSX.Element> = {
+ page_icon_section: (content) => (
+ }>
+
+
+ ),
+ page_image_content: (content) => ,
+ page_section: (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).value)
+ .filter(Boolean) as PageContent[];
+
return (
<>
- {page.title}
-
-
- {`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
- year: 'numeric',
- month: 'long',
- day: 'numeric'
- }).format(new Date(page.updatedAt))}.`}
-
+
+
+ {page.title}
+
+
+
+
+
+ {pageContents.map((content) => (
+
{contentMap[content.key](content)}
+ ))}
+
+
-
-
+
+
+
{metaobject.title}
+
+ {contentBlocks.map((block) => (
+
+ {block.icon_name && (
+
+ )}
+ {block.title}
+ {block.content}
+
+ ))}
+
+
+ {content.metaobjects.map((metaobject) => {
+ const contentBlocks = JSON.parse(metaobject.description || '{}');
+
+ return (
+
+ );
+ })}
+
+ {block.children.map((child, index) => (
+
+ ))}
+
+ );
+};
+
+const RichTextDisplay = ({ contentBlocks }: { contentBlocks: Content[] }) => {
+ return (
+
+ {contentBlocks.map((block, index) => (
+
+ ))}
+
+ );
+};
+
+export default RichTextDisplay;
diff --git a/components/page/text-block.tsx b/components/page/text-block.tsx
new file mode 100644
index 000000000..ae5a15a78
--- /dev/null
+++ b/components/page/text-block.tsx
@@ -0,0 +1,23 @@
+import { PageContent } from 'lib/shopify/types';
+import RichTextDisplay from './rich-text-display';
+
+const TextBlock = ({ content }: { content: PageContent }) => {
+ if (!content.metaobjects.length) return null;
+
+ return (
+
+ {content.metaobjects.map((metaobject) => {
+ const contentBlocks = JSON.parse(metaobject.content || '{}');
+
+ return (
+
+
{metaobject.title}
+
+
+ );
+ })}
+