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">