From 23e2f7bc9eb7f6b589c9ed4fdbdf5481edb618f2 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Wed, 11 Dec 2024 15:42:10 -0600
Subject: [PATCH] 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.
---
 templates/website/src/Footer/Component.tsx                  | 4 ++--
 templates/website/src/Header/Component.client.tsx           | 6 +++---
 templates/website/src/Header/Component.tsx                  | 4 ++--
 templates/website/src/Header/Nav/index.tsx                  | 4 ++--
 templates/with-vercel-website/src/Footer/Component.tsx      | 4 ++--
 .../with-vercel-website/src/Header/Component.client.tsx     | 6 +++---
 templates/with-vercel-website/src/Header/Component.tsx      | 4 ++--
 templates/with-vercel-website/src/Header/Nav/index.tsx      | 4 ++--
 8 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/templates/website/src/Footer/Component.tsx b/templates/website/src/Footer/Component.tsx
index 99aa1ccc491..17771447f87 100644
--- a/templates/website/src/Footer/Component.tsx
+++ b/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">
diff --git a/templates/website/src/Header/Component.client.tsx b/templates/website/src/Header/Component.client.tsx
index 8765c96d8e0..a4bd6584b76 100644
--- a/templates/website/src/Header/Component.client.tsx
+++ b/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>
   )
diff --git a/templates/website/src/Header/Component.tsx b/templates/website/src/Header/Component.tsx
index c5258679f7b..02d2e644352 100644
--- a/templates/website/src/Header/Component.tsx
+++ b/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} />
 }
diff --git a/templates/website/src/Header/Nav/index.tsx b/templates/website/src/Header/Nav/index.tsx
index df9f96640e8..070fcca91dd 100644
--- a/templates/website/src/Header/Nav/index.tsx
+++ b/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">
diff --git a/templates/with-vercel-website/src/Footer/Component.tsx b/templates/with-vercel-website/src/Footer/Component.tsx
index 99aa1ccc491..17771447f87 100644
--- a/templates/with-vercel-website/src/Footer/Component.tsx
+++ b/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">
diff --git a/templates/with-vercel-website/src/Header/Component.client.tsx b/templates/with-vercel-website/src/Header/Component.client.tsx
index 8765c96d8e0..a4bd6584b76 100644
--- a/templates/with-vercel-website/src/Header/Component.client.tsx
+++ b/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>
   )
diff --git a/templates/with-vercel-website/src/Header/Component.tsx b/templates/with-vercel-website/src/Header/Component.tsx
index c5258679f7b..02d2e644352 100644
--- a/templates/with-vercel-website/src/Header/Component.tsx
+++ b/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} />
 }
diff --git a/templates/with-vercel-website/src/Header/Nav/index.tsx b/templates/with-vercel-website/src/Header/Nav/index.tsx
index df9f96640e8..070fcca91dd 100644
--- a/templates/with-vercel-website/src/Header/Nav/index.tsx
+++ b/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">