pages pattern

components/Pages/Home/Client.tsx

@@ -0,0 +1,19 @@
+"use client"
+import React from "react"
+import { Renderer } from "./Renderer"
+import { HomeProps } from "./types"
+import { useTina } from "tinacms/dist/react"
+
+export const HomeClient: React.FC<HomeProps> = ({ pageInfo }) => {
+  const z = useTina({
+      // @ts-ignore
+      query: pageInfo.query,
+      // @ts-ignore
+      variables: pageInfo.variables,
+      data: pageInfo.data
+    })
+
+  return (
+    <Renderer pageInfo={z} />
+  )
+}

components/Pages/Home/Renderer.tsx

@@ -0,0 +1,9 @@
+import { HomeProps } from "./types";
+
+export const Renderer: React.FC<HomeProps> = ({ pageInfo }) => {
+  return (
+    <div>
+      {JSON.stringify(pageInfo.data, null, 2)}
+    </div>
+  )
+}

components/Pages/Home/index.tsx

@@ -0,0 +1,6 @@
+import { HomeClient } from "./Client";
+import { Renderer } from "./Renderer";
+
+const Home = process.env.NODE_ENV === "development" ? HomeClient : Renderer;
+
+export default Home;

components/Pages/Home/types.ts

@@ -0,0 +1,5 @@
+export type HomeProps = {
+  pageInfo: {
+    data: any
+  }
+}