Ported more functionality

app/[locale]/[[...slug]]/category-page.tsx

@@ -0,0 +1,15 @@
+
+interface CategoryPageProps {
+  data: object | any
+}
+
+// This is a Client Component. It receives data as props and
+// has access to state and effects just like Page components
+// in the `pages` directory.
+export default function ProductPage({data }: CategoryPageProps) {
+  console.log(data);
+
+  return (
+    <>Category page</>
+  )
+}

app/[locale]/[[...slug]]/home-page.tsx

@@ -1,9 +1,13 @@
-import DynamicContentManager from 'components/ui/dynamic-content-manager'
+import DynamicContentManager from 'components/layout/dynamic-content-manager'
+
+interface HomePageProps {
+  data: object | any
+}
 
 // This is a Client Component. It receives data as props and
 // has access to state and effects just like Page components
 // in the `pages` directory.
-export default function HomePage({ data }: { data: object | any }) {
+export default function HomePage({ data }: HomePageProps) {
   return (
     <DynamicContentManager content={data?.content} />
   )

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

@@ -4,7 +4,9 @@ import getQueryFromSlug from 'helpers/getQueryFromSlug';
 import { docQuery } from 'lib/sanity/queries';
 import { client } from 'lib/sanity/sanity.client';
 import { groq } from 'next-sanity';
+import CategoryPage from './category-page';
 import HomePage from './home-page';
+import ProductPage from './product-page';
 import SinglePage from './single-page';
 
 export async function generateStaticParams() {
@@ -57,11 +59,11 @@ export default async function Page({
   const data = filterDataToSingleItem(pageData, false)
   
   return (
-    <div>
-      <>
+    <>
       {docType === 'home' && <HomePage data={data} />}
+      {docType === 'product' && <ProductPage data={data} />}
+      {docType === 'category' && <CategoryPage data={data} />}
       {docType === 'page' && <SinglePage data={data} />}
     </>
-    </div>
   )
 }

app/[locale]/[[...slug]]/product-page.tsx

@@ -0,0 +1,16 @@
+import ProductView from "components/product/product-view";
+
+interface ProductPageProps {
+  data: object | any
+}
+
+// This is a Client Component. It receives data as props and
+// has access to state and effects just like Page components
+// in the `pages` directory.
+export default function ProductPage({data }: ProductPageProps) {
+  const { product } = data;
+
+  return (
+    <ProductView product={product} relatedProducts={[]} />
+  )
+}

app/[locale]/[[...slug]]/single-page.tsx

@@ -3,7 +3,7 @@
 import dynamic from 'next/dynamic'
 
 const DynamicContentManager = dynamic(
-  () => import('components/ui/dynamic-content-manager')
+  () => import('components/layout/dynamic-content-manager')
 )
 
 interface SinglePageProps {