From 9894c28385d82894550c6de140f2ad07ae4ac630 Mon Sep 17 00:00:00 2001
From: kristian ulvund <kristian.ulvund@fremtind.no>
Date: Wed, 26 Feb 2025 11:48:35 +0100
Subject: [PATCH] feat: setup sanity portable text

Setup Sanity portable text

ISSUES CLOSED: #4596
---
 ny-portal/package.json                        |  5 +++--
 .../(frontend)/komponenter/[slug]/page.tsx    |  5 +++++
 .../src/components/portable-text/index.tsx    | 20 +++++++++++++++++++
 pnpm-lock.yaml                                |  8 +++++---
 4 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 ny-portal/src/components/portable-text/index.tsx

diff --git a/ny-portal/package.json b/ny-portal/package.json
index 771cf1cae36..f28594a8755 100644
--- a/ny-portal/package.json
+++ b/ny-portal/package.json
@@ -26,8 +26,9 @@
         "@payloadcms/next": "latest",
         "@payloadcms/richtext-lexical": "latest",
         "@payloadcms/ui": "latest",
-        "@sanity/image-url": "^1.1.0",
+        "@portabletext/react": "^3.2.1",
         "@sanity/client": "^6.28.1",
+        "@sanity/image-url": "^1.1.0",
         "@sanity/vision": "^3.76.3",
         "@types/mdx": "^2.0.13",
         "clsx": "^2.1.1",
@@ -57,4 +58,4 @@
     "engines": {
         "node": ">=21.0.0"
     }
-}
\ No newline at end of file
+}
diff --git a/ny-portal/src/app/(frontend)/komponenter/[slug]/page.tsx b/ny-portal/src/app/(frontend)/komponenter/[slug]/page.tsx
index deae61a2524..f88ec999cb6 100644
--- a/ny-portal/src/app/(frontend)/komponenter/[slug]/page.tsx
+++ b/ny-portal/src/app/(frontend)/komponenter/[slug]/page.tsx
@@ -1,3 +1,4 @@
+import PortableTextRenderer from "@/components/portable-text";
 import { client } from "@/sanity/client";
 import { componentPageBySlugQuery } from "@/sanity/queries/componentPage";
 
@@ -13,6 +14,10 @@ export default async function Page({
     return (
         <>
             <div>Hei jeg er {data?.title || "ikke i databasen"}</div>
+
+            {data?.lede && <PortableTextRenderer value={data.lede} />}
+
+            {data?.content && <PortableTextRenderer value={data.content} />}
         </>
     );
 }
diff --git a/ny-portal/src/components/portable-text/index.tsx b/ny-portal/src/components/portable-text/index.tsx
new file mode 100644
index 00000000000..97c206429f8
--- /dev/null
+++ b/ny-portal/src/components/portable-text/index.tsx
@@ -0,0 +1,20 @@
+import { PortableText, PortableTextComponents } from "@portabletext/react";
+
+type PortableTextProps = React.ComponentProps<typeof PortableText>;
+
+const defaultComponents: PortableTextComponents = {
+    block: {
+        normal: ({ children }) => <p>{children}</p>,
+    },
+};
+
+const PortableTextRenderer = ({ components, ...props }: PortableTextProps) => {
+    return (
+        <PortableText
+            components={{ ...defaultComponents, ...components }}
+            {...props}
+        />
+    );
+};
+
+export default PortableTextRenderer;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 27216ca3507..e0798244bcd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -257,6 +257,7 @@ importers:
       '@payloadcms/next': latest
       '@payloadcms/richtext-lexical': latest
       '@payloadcms/ui': latest
+      '@portabletext/react': ^3.2.1
       '@sanity/client': ^6.28.1
       '@sanity/image-url': ^1.1.0
       '@sanity/vision': ^3.76.3
@@ -291,6 +292,7 @@ importers:
       '@payloadcms/next': 3.24.0_zwv7dxb5sqox5sobdoa2myy6c4
       '@payloadcms/richtext-lexical': 3.24.0_uxvwbg5x3kcclzt4szg2os5bai
       '@payloadcms/ui': 3.24.0_jwiilpqprnahropgbz3p5zgcuq
+      '@portabletext/react': 3.2.1_react@18.3.1
       '@sanity/client': 6.28.1
       '@sanity/image-url': 1.1.0
       '@sanity/vision': 3.76.3_aozy4kbx7dhcjwlqs4cq7taznu
@@ -4293,7 +4295,7 @@ packages:
       '@babel/helper-module-imports': 7.25.9
       '@babel/helper-plugin-utils': 7.25.9
       '@babel/plugin-syntax-jsx': 7.25.9_@babel+core@7.26.0
-      '@babel/types': 7.26.5
+      '@babel/types': 7.26.9
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -14271,7 +14273,7 @@ packages:
       vite: ^4 || ^5 || ^6
     dependencies:
       '@swc/core': 1.10.9
-      vite: 5.4.14
+      vite: 5.4.14_wuqbsma3qgqk5tdosann5rauia
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
@@ -14287,7 +14289,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.25.9_@babel+core@7.26.0
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 5.4.14_sass-embedded@1.83.4
+      vite: 5.4.14_wuqbsma3qgqk5tdosann5rauia
     transitivePeerDependencies:
       - supports-color
     dev: true