feat: Shop list working

app/[locale]/[page]/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 
+import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Prose from 'components/prose';
 import { getPage } from 'lib/shopify';
 import { notFound } from 'next/navigation';
@@ -11,9 +12,9 @@ export const revalidate = 43200; // 12 hours in seconds
 export async function generateMetadata({
   params
 }: {
-  params: { page: string };
+  params: { page: string; locale: SupportedLocale };
 }): Promise<Metadata> {
-  const page = await getPage({ handle: params.page });
+  const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
 
   if (!page) return notFound();
 
@@ -28,13 +29,17 @@ export async function generateMetadata({
   };
 }
 
-export default async function Page({ params }: { params: { page: string } }) {
-  const page = await getPage({ handle: params.page });
+export default async function Page({
+  params
+}: {
+  params: { page: string; locale: SupportedLocale };
+}) {
+  const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
 
   if (!page) return notFound();
 
   return (
-    <>
+    <div className="text-white">
       <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">
@@ -44,6 +49,6 @@ export default async function Page({ params }: { params: { page: string } }) {
           day: 'numeric'
         }).format(new Date(page.updatedAt))}.`}
       </p>
-    </>
+    </div>
   );
 }

app/[locale]/page.tsx

@@ -1,7 +1,7 @@
 import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
-import { LanguageControl, SupportedLocales } from 'components/layout/navbar/language-control';
+import { LanguageControl, SupportedLocale } from 'components/layout/navbar/language-control';
 
 import clsx from 'clsx';
 import LogoNamemark from 'components/icons/namemark';
@@ -25,7 +25,7 @@ export const metadata = {
 export default async function HomePage({
   params: { locale }
 }: {
-  params: { locale: SupportedLocales };
+  params: { locale: SupportedLocale };
 }) {
   return (
     <>

app/[locale]/shops/[page]/ShopsTitle.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+export default function ShopsTitle() {
+  const t = useTranslations('Index');
+  return (
+    <div>
+      <div className="flex flex-row items-baseline space-x-6 pb-12">
+        <Link href="/#shops">
+          <span className="flex flex-row items-center space-x-1.5">
+            <span>←</span>
+            <span>{t('shops.all')}</span>
+          </span>
+        </Link>
+        <div>|</div>
+        <div className="font-medium">{t('shops.title')}</div>
+      </div>
+    </div>
+  );
+}

app/[locale]/shops/[page]/layout.tsx

@@ -0,0 +1,15 @@
+import Footer from 'components/layout/footer';
+import { Suspense } from 'react';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense>
+      <div className="w-full">
+        <div className="mx-8 max-w-screen-2xl py-20 sm:mx-auto">
+          <Suspense>{children}</Suspense>
+        </div>
+      </div>
+      <Footer />
+    </Suspense>
+  );
+}

app/[locale]/shops/[page]/opengraph-image.tsx

@@ -0,0 +1,11 @@
+import OpengraphImage from 'components/opengraph-image';
+import { getPage } from 'lib/shopify';
+
+export const runtime = 'edge';
+
+export default async function Image({ params }: { params: { page: string } }) {
+  const page = await getPage({ handle: params.page });
+  const title = page.seo?.title || page.title;
+
+  return await OpengraphImage({ title });
+}

app/[locale]/shops/[page]/page.tsx

@@ -0,0 +1,49 @@
+import type { Metadata } from 'next';
+
+import { SupportedLocale } from 'components/layout/navbar/language-control';
+import Prose from 'components/prose';
+import { getPage } from 'lib/shopify';
+import { notFound } from 'next/navigation';
+import ShopsTitle from './ShopsTitle';
+
+export const runtime = 'edge';
+
+export const revalidate = 43200; // 12 hours in seconds
+
+export async function generateMetadata({
+  params
+}: {
+  params: { page: string; locale: SupportedLocale };
+}): Promise<Metadata> {
+  const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
+
+  if (!page) return notFound();
+
+  return {
+    title: page.seo?.title || page.title,
+    description: page.seo?.description || page.bodySummary,
+    openGraph: {
+      publishedTime: page.createdAt,
+      modifiedTime: page.updatedAt,
+      type: 'article'
+    }
+  };
+}
+
+export default async function Page({
+  params
+}: {
+  params: { page: string; locale: SupportedLocale };
+}) {
+  const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
+
+  if (!page) return notFound();
+
+  return (
+    <div className="font-multilingual min-h-screen px-4 text-white">
+      <ShopsTitle />
+      <h2 className="mb-8 text-3xl font-medium">{page.title}</h2>
+      <Prose className="mb-8" html={page.body as string} />
+    </div>
+  );
+}