templates: change names of data variables to improve clarity between data and elements (#9912)

Renames `header` to `headerData` and other props to `data` so that it's
clearer for people learning Nextjs or React.

Author: paulpopus

templates/website/src/Footer/Component.tsx

@@ -9,9 +9,9 @@ import { CMSLink } from '@/components/Link'
 import { Logo } from '@/components/Logo/Logo'
 
 export async function Footer() {
-  const footer: Footer = await getCachedGlobal('footer', 1)()
+  const footerData: Footer = await getCachedGlobal('footer', 1)()
 
-  const navItems = footer?.navItems || []
+  const navItems = footerData?.navItems || []
 
   return (
     <footer className="border-t border-border bg-black dark:bg-card text-white">

templates/website/src/Header/Component.client.tsx

@@ -10,10 +10,10 @@ import { Logo } from '@/components/Logo/Logo'
 import { HeaderNav } from './Nav'
 
 interface HeaderClientProps {
-  header: Header
+  data: Header
 }
 
-export const HeaderClient: React.FC<HeaderClientProps> = ({ header }) => {
+export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
   /* Storing the value in a useState to avoid hydration errors */
   const [theme, setTheme] = useState<string | null>(null)
   const { headerTheme, setHeaderTheme } = useHeaderTheme()
@@ -35,7 +35,7 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ header }) => {
         <Link href="/">
           <Logo loading="eager" priority="high" className="invert dark:invert-0" />
         </Link>
-        <HeaderNav header={header} />
+        <HeaderNav data={data} />
       </div>
     </header>
   )

templates/website/src/Header/Component.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 import type { Header } from '@/payload-types'
 
 export async function Header() {
-  const header: Header = await getCachedGlobal('header', 1)()
+  const headerData: Header = await getCachedGlobal('header', 1)()
 
-  return <HeaderClient header={header} />
+  return <HeaderClient data={headerData} />
 }

templates/website/src/Header/Nav/index.tsx

@@ -8,8 +8,8 @@ import { CMSLink } from '@/components/Link'
 import Link from 'next/link'
 import { SearchIcon } from 'lucide-react'
 
-export const HeaderNav: React.FC<{ header: HeaderType }> = ({ header }) => {
-  const navItems = header?.navItems || []
+export const HeaderNav: React.FC<{ data: HeaderType }> = ({ data }) => {
+  const navItems = data?.navItems || []
 
   return (
     <nav className="flex gap-3 items-center">

templates/with-vercel-website/src/Footer/Component.tsx

@@ -9,9 +9,9 @@ import { CMSLink } from '@/components/Link'
 import { Logo } from '@/components/Logo/Logo'
 
 export async function Footer() {
-  const footer: Footer = await getCachedGlobal('footer', 1)()
+  const footerData: Footer = await getCachedGlobal('footer', 1)()
 
-  const navItems = footer?.navItems || []
+  const navItems = footerData?.navItems || []
 
   return (
     <footer className="border-t border-border bg-black dark:bg-card text-white">

templates/with-vercel-website/src/Header/Component.client.tsx

@@ -10,10 +10,10 @@ import { Logo } from '@/components/Logo/Logo'
 import { HeaderNav } from './Nav'
 
 interface HeaderClientProps {
-  header: Header
+  data: Header
 }
 
-export const HeaderClient: React.FC<HeaderClientProps> = ({ header }) => {
+export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
   /* Storing the value in a useState to avoid hydration errors */
   const [theme, setTheme] = useState<string | null>(null)
   const { headerTheme, setHeaderTheme } = useHeaderTheme()
@@ -35,7 +35,7 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ header }) => {
         <Link href="/">
           <Logo loading="eager" priority="high" className="invert dark:invert-0" />
         </Link>
-        <HeaderNav header={header} />
+        <HeaderNav data={data} />
       </div>
     </header>
   )

templates/with-vercel-website/src/Header/Component.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 import type { Header } from '@/payload-types'
 
 export async function Header() {
-  const header: Header = await getCachedGlobal('header', 1)()
+  const headerData: Header = await getCachedGlobal('header', 1)()
 
-  return <HeaderClient header={header} />
+  return <HeaderClient data={headerData} />
 }

templates/with-vercel-website/src/Header/Nav/index.tsx

@@ -8,8 +8,8 @@ import { CMSLink } from '@/components/Link'
 import Link from 'next/link'
 import { SearchIcon } from 'lucide-react'
 
-export const HeaderNav: React.FC<{ header: HeaderType }> = ({ header }) => {
-  const navItems = header?.navItems || []
+export const HeaderNav: React.FC<{ data: HeaderType }> = ({ data }) => {
+  const navItems = data?.navItems || []
 
   return (
     <nav className="flex gap-3 items-center">