bg

src/heros/LowImpact/index.tsx

@@ -8,17 +8,30 @@ type LowImpactHeroType =
   | {
       children?: React.ReactNode
       richText?: never
+      theme?: never
     }
   | (Omit<Page['hero'], 'richText'> & {
       children?: never
       richText?: Page['hero']['richText']
+      theme?: string
     })
 
-export const LowImpactHero: React.FC<LowImpactHeroType> = ({ children, richText }) => {
+const bgMap: Record<string, string> = {
+  default: 'bg-transparent',
+  muted: 'bg-muted',
+  card: 'bg-card',
+  secondary: 'bg-secondary',
+}
+
+export const LowImpactHero: React.FC<LowImpactHeroType> = ({ children, richText, theme }) => {
+  const bg = bgMap[theme ?? 'default'] ?? 'bg-transparent'
+
   return (
-    <div className="container mt-16">
+    <div className={bg}>
-      <div className="max-w-[48rem] [&_h3]:opacity-60">
+      <div className="container mt-16">
-        {children || (richText && <RichText data={richText} enableGutter={false} />)}
+        <div className="max-w-[48rem] [&_h3]:opacity-60">
+          {children || (richText && <RichText data={richText} enableGutter={false} />)}
+        </div>
       </div>
     </div>
   )

src/heros/config.ts

@@ -19,25 +19,28 @@ export const hero: Field = {
       defaultValue: 'lowImpact',
       label: 'Type',
       options: [
-        {
+        { label: 'None', value: 'none' },
-          label: 'None',
+        { label: 'High Impact', value: 'highImpact' },
-          value: 'none',
+        { label: 'Medium Impact', value: 'mediumImpact' },
-        },
+        { label: 'Low Impact', value: 'lowImpact' },
-        {
-          label: 'High Impact',
-          value: 'highImpact',
-        },
-        {
-          label: 'Medium Impact',
-          value: 'mediumImpact',
-        },
-        {
-          label: 'Low Impact',
-          value: 'lowImpact',
-        },
       ],
       required: true,
     },
+    {
+      name: 'theme',
+      type: 'select',
+      defaultValue: 'default',
+      label: 'Background',
+      admin: {
+        condition: (_, { type } = {}) => type === 'lowImpact',
+      },
+      options: [
+        { label: 'Default (Transparent)', value: 'default' },
+        { label: 'Muted', value: 'muted' },
+        { label: 'Card', value: 'card' },
+        { label: 'Secondary', value: 'secondary' },
+      ],
+    },
     {
       name: 'richText',
       type: 'richText',

src/payload-types.ts

@@ -160,6 +160,7 @@ export interface Page {
   title: string;
   hero: {
     type: 'none' | 'highImpact' | 'mediumImpact' | 'lowImpact';
+    theme?: ('default' | 'muted' | 'card' | 'secondary') | null;
     richText?: {
       root: {
         type: string;
@@ -201,7 +202,59 @@ export interface Page {
       | null;
     media?: (string | null) | Media;
   };
-  layout: (CallToActionBlock | ContentBlock | MediaBlock | ArchiveBlock | FormBlock)[];
+  layout: (
+    | CallToActionBlock
+    | ContentBlock
+    | MediaBlock
+    | ArchiveBlock
+    | FormBlock
+    | {
+        heading?: string | null;
+        keySkills?:
+          | {
+              skill: string;
+              id?: string | null;
+            }[]
+          | null;
+        categories?:
+          | {
+              title: string;
+              icon?:
+                | (
+                    | 'ti-layout'
+                    | 'ti-server'
+                    | 'ti-vector-pen'
+                    | 'ti-briefcase'
+                    | 'ti-world'
+                    | 'ti-camera'
+                    | 'ti-tools'
+                    | 'ti-sparkles'
+                    | 'ti-device-mobile'
+                    | 'ti-code'
+                    | 'ti-chart-bar'
+                    | 'ti-star'
+                  )
+                | null;
+              tags?:
+                | {
+                    tag: string;
+                    id?: string | null;
+                  }[]
+                | null;
+              id?: string | null;
+            }[]
+          | null;
+        id?: string | null;
+        blockName?: string | null;
+        blockType: 'skills';
+      }
+    | {
+        heading?: string | null;
+        id?: string | null;
+        blockName?: string | null;
+        blockType: 'skillsMarquee';
+      }
+  )[];
   meta?: {
     title?: string | null;
     /**
@@ -1063,6 +1116,7 @@ export interface PagesSelect<T extends boolean = true> {
     | T
     | {
         type?: T;
+        theme?: T;
         richText?: T;
         links?:
           | T
@@ -1089,6 +1143,39 @@ export interface PagesSelect<T extends boolean = true> {
         mediaBlock?: T | MediaBlockSelect<T>;
         archive?: T | ArchiveBlockSelect<T>;
         formBlock?: T | FormBlockSelect<T>;
+        skills?:
+          | T
+          | {
+              heading?: T;
+              keySkills?:
+                | T
+                | {
+                    skill?: T;
+                    id?: T;
+                  };
+              categories?:
+                | T
+                | {
+                    title?: T;
+                    icon?: T;
+                    tags?:
+                      | T
+                      | {
+                          tag?: T;
+                          id?: T;
+                        };
+                    id?: T;
+                  };
+              id?: T;
+              blockName?: T;
+            };
+        skillsMarquee?:
+          | T
+          | {
+              heading?: T;
+              id?: T;
+              blockName?: T;
+            };
       };
   meta?:
     | T