feat: add heroImage field to HeroSection and implement image formatting utility

apps/landing/src/app/(frontend)/_components/hero.tsx

@@ -6,13 +6,22 @@ import {
   SparklesIcon,
   UsersIcon,
 } from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { formatCMSImageDataToMedia } from 'apps/landing/src/lib/format';
 import { HeroSection } from 'apps/landing/src/payload-types';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
 import { Fragment, useEffect, useState } from 'react';
 
 export function Hero(props: HeroSection) {
-  const { badgeText, buttons, description, highlight, title, stats } = props;
+  const {
+    badgeText,
+    buttons,
+    description,
+    highlight,
+    title,
+    stats,
+    heroImage,
+  } = props;
 
   const [scrollY, setScrollY] = useState(0);
 
@@ -54,7 +63,7 @@ export function Hero(props: HeroSection) {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
           >
-            <div className="inline-flex items-center rounded-full border px-3 py-1 text-sm">
+            <div className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit">
               <SparklesIcon className="mr-1 h-3.5 w-3.5 text-primary" />
               <span>{badgeText}</span>
             </div>
@@ -125,13 +134,19 @@ font-bold text-black hover:text-white cursor-pointer"
               </div>
               <div className="relative z-10 rounded-2xl overflow-hidden border shadow-2xl">
                 <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-blue-400/10" />
-                <Image
-                  src="/hero.jpeg"
-                  width={600}
-                  height={500}
-                  alt="IMPHNEN Programming Community"
-                  className="w-full h-auto object-cover"
-                />
+                {(() => {
+                  const media = formatCMSImageDataToMedia(heroImage);
+                  if (!media) return null;
+                  return (
+                    <Image
+                      src={media.url!}
+                      alt={media.alt}
+                      width={600}
+                      height={500}
+                      className="w-full h-auto object-cover"
+                    />
+                  );
+                })()}
               </div>
             </div>
           </motion.div>

apps/landing/src/app/(payload)/admin/importMap.js

@@ -1,6 +1,5 @@
-import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client';
+import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client'
 
 export const importMap = {
-  '@payloadcms/storage-s3/client#S3ClientUploadHandler':
-    S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24,
-};
+  "@payloadcms/storage-s3/client#S3ClientUploadHandler": S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24
+}

apps/landing/src/collections/HeroSection.ts

@@ -4,6 +4,13 @@ export const HeroSection: GlobalConfig = {
   slug: 'hero-section',
   label: 'Hero Section',
   fields: [
+    {
+      name: 'heroImage',
+      label: 'Hero Image',
+      type: 'upload',
+      relationTo: 'media',
+      required: true,
+    },
     {
       name: 'badgeText',
       label: 'Badge Text',

apps/landing/src/lib/format.ts

@@ -0,0 +1,10 @@
+import { Media } from '../payload-types';
+
+export function formatCMSImageDataToMedia(
+  image: number | Media | null | undefined
+): Media | null {
+  if (image && typeof image === 'object' && 'url' in image) {
+    return image as Media;
+  }
+  return null;
+}

apps/landing/src/payload-types.ts

@@ -285,6 +285,7 @@ export interface PayloadMigrationsSelect<T extends boolean = true> {
  */
 export interface HeroSection {
   id: number;
+  heroImage: number | Media;
   badgeText: string;
   title: string;
   highlight: string;
@@ -351,6 +352,7 @@ export interface CommunitiesSection {
  * via the `definition` "hero-section_select".
  */
 export interface HeroSectionSelect<T extends boolean = true> {
+  heroImage?: T;
   badgeText?: T;
   title?: T;
   highlight?: T;