chore: gets rid of unique key prop & prop className did not match warnings

templates/developer-portfolio/src/app/_components/content/contentBlock.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, Fragment } from 'react'
 
 import { Block, BlockProps } from '../ui/block'
 import { PayloadLink, PayloadLinkType } from './link'
@@ -16,7 +16,7 @@ interface ContentBlockProps {
 
 export const ContentBlock: FC<ContentBlockProps> = ({ contentFields }) => {
   return (
-    <>
+    <Fragment>
       {contentFields.map(({ richText, size, id, enableLink, link }) => {
         let content = <RichText content={richText} />
 
@@ -30,6 +30,6 @@ export const ContentBlock: FC<ContentBlockProps> = ({ contentFields }) => {
           </Block>
         )
       })}
-    </>
+    </Fragment>
   )
 }

templates/developer-portfolio/src/app/_components/content/formBlock.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { FC, useState } from 'react'
+import React, { FC, Fragment, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Data } from 'payload/dist/admin/components/forms/Form/types'
 
@@ -170,7 +170,7 @@ export const FormBlock: FC<FormBlockProps> = props => {
               }
 
               return (
-                <>
+                <Fragment key={`row-${index}`}>
                   <style
                     key={`style-${index}`}
                     dangerouslySetInnerHTML={{
@@ -189,7 +189,7 @@ export const FormBlock: FC<FormBlockProps> = props => {
                   />
                   <div
                     id={`formField__${props.id}`}
-                    key={index}
+                    key={`${formID}-${field.name}-${index}`}
                     className="inline-flex flex-col gap-2 mt-4 first:mt-0 content-box pb-4 last:pb-0 lg:pb-0 pr-0 lg:pr-5 last:pr-0 "
                   >
                     <label htmlFor={props.id} className="text-sm text-primary">
@@ -202,7 +202,7 @@ export const FormBlock: FC<FormBlockProps> = props => {
                       </div>
                     )}
                   </div>
-                </>
+                </Fragment>
               )
             })}
           </div>

templates/developer-portfolio/src/app/_components/content/mediaBlock.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, Fragment } from 'react'
 import { cva } from 'class-variance-authority'
 import Image from 'next/image'
 
@@ -53,12 +53,12 @@ export const MediaBlock: FC<MediaBlockProps> = ({
   captionSize,
 }) => {
   return (
-    <>
+    <Fragment>
       {mediaFields.map(({ media, size, mediaFit = 'cover' }) => {
         const mediaInfo = media as Media
 
         const base = (
-          <>
+          <Fragment>
             <div
               className={cn(
                 'flex-0 flex relative',
@@ -78,7 +78,7 @@ export const MediaBlock: FC<MediaBlockProps> = ({
                 priority={priority}
               />
             </div>
-          </>
+          </Fragment>
         )
 
         const containerClassNames = cn(
@@ -114,6 +114,6 @@ export const MediaBlock: FC<MediaBlockProps> = ({
           </Block>
         )
       })}
-    </>
+    </Fragment>
   )
 }

templates/developer-portfolio/src/app/_components/content/mediaContentBlock.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, Fragment } from 'react'
 
 import { Media } from '../../../payload-types'
 import { ContentBlock } from './contentBlock'
@@ -31,7 +31,7 @@ const complimentSizes: Record<LayoutSize, LayoutSize> = {
 
 export const MediaContentBlock: FC<MediaContentBlockProps> = ({ mediaContentFields, priority }) => {
   return (
-    <>
+    <Fragment>
       {mediaContentFields?.map(
         ({ alignment, mediaSize, media, richText, link, enableLink, mediaFit }) => {
           const mediaBlock = (
@@ -62,17 +62,17 @@ export const MediaContentBlock: FC<MediaContentBlockProps> = ({ mediaContentFiel
           let content
           if (alignment === 'contentMedia') {
             content = (
-              <>
+              <Fragment>
                 {contentBlock}
                 {mediaBlock}
-              </>
+              </Fragment>
             )
           } else {
             content = (
-              <>
+              <Fragment>
                 {mediaBlock}
                 {contentBlock}
-              </>
+              </Fragment>
             )
           }
 
@@ -90,6 +90,6 @@ export const MediaContentBlock: FC<MediaContentBlockProps> = ({ mediaContentFiel
           return content
         },
       )}
-    </>
+    </Fragment>
   )
 }

templates/developer-portfolio/src/app/layout.tsx

@@ -25,7 +25,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   const [profile, header] = await Promise.all([fetchProfile(), fetchHeader()])
 
   return (
-    <html lang="en" className={`dark ${inter.className}`}>
+    <html lang="en" className={`${inter.className} dark`}>
       <body className="w-full overflow-x-hidden">
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <Backdrop />