feat: payload cms

components/PayloadRichText.tsx

@@ -1,4 +1,4 @@
-import { RichText } from '@payloadcms/richtext-lexical/react';
+import { defaultJSXConverters, RichText } from '@payloadcms/richtext-lexical/react';
 import type { JSXConverters } from '@payloadcms/richtext-lexical/react';
 import Image from 'next/image';
 
@@ -16,7 +16,9 @@ import Stats from '@/components/blog/Stats';
 import SplitHeading from '@/components/blog/SplitHeading';
 import ProductTabs from '@/components/ProductTabs';
 import ProductTechnicalData from '@/components/ProductTechnicalData';
+
 const jsxConverters: JSXConverters = {
+  ...defaultJSXConverters,
   blocks: {
     // Map the custom Payload Blocks created in src/payload/blocks to their React components
     // Payload Lexical exposes blocks using the 'block-[slug]' pattern
@@ -160,7 +162,7 @@ const jsxConverters: JSXConverters = {
           />
         }
       >
-        <></>
+        {node.fields.content && <RichText data={node.fields.content} converters={jsxConverters} />}
       </ProductTabs>
     ),
   },
@@ -191,6 +193,9 @@ const jsxConverters: JSXConverters = {
           height={height}
           className="w-full object-cover transition-transform duration-700 hover:scale-105"
           sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
+          style={{
+            objectPosition: `${node?.value?.focalX ?? 50}% ${node?.value?.focalY ?? 50}%`,
+          }}
         />
         {node?.value?.caption && (
           <figcaption className="p-4 bg-neutral-dark text-white/80 text-sm text-center italic border-t border-white/10">

components/ProductTechnicalData.tsx

@@ -130,12 +130,14 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
                         <td className="px-3 py-2 text-xs font-bold text-primary sticky left-0 bg-white group-hover:bg-neutral-light/50 z-10 whitespace-nowrap">
                           {row.configuration}
                         </td>
-                        {row.cells.map((cell, cellIdx) => (
+                        {row.cells.map((cell: any, cellIdx: number) => (
                           <td
                             key={cellIdx}
                             className="px-3 py-2 text-xs text-text-secondary whitespace-nowrap"
                           >
-                            {cell}
+                            {typeof cell === 'object' && cell !== null && 'value' in cell
+                              ? cell.value
+                              : cell}
                           </td>
                         ))}
                       </tr>