Merge pull request #653 from WestpacGEL/hero-component-fix

converted the hero component to be a server component

apps/site/src/app/design-system/components/hero/components/header/header.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { HamburgerMenuIcon } from '@westpac/ui/icon';
 import { type BrandKey } from '@westpac/ui/tailwind';
 import throttle from 'lodash.throttle';

apps/site/src/app/design-system/components/hero/hero.component.tsx

@@ -1,18 +1,13 @@
-'use client';
-
 import { Grid, GridItem } from '@westpac/ui';
 import { AccessibilityPictogram, StopwatchPictogram, TruckPictogram } from '@westpac/ui/pictogram';
-import { useSearchParams } from 'next/navigation';
 
 import { Container } from '@/app/design-system/components';
 import { type BrandKey } from '@/app/types/brand.types';
 
 import { BackgroundImage, Header } from './components';
 import { styles } from './hero.styles';
 
-export function Hero() {
-  const searchParams = useSearchParams();
-  const brand = (searchParams.get('brand') ?? 'wbc') as BrandKey;
+export function Hero({ brand }: { brand: BrandKey }) {
   const { base, heading } = styles({ brand });
   return (
     <section className={base()}>

apps/site/src/app/design-system/page.tsx

@@ -2,6 +2,7 @@ import { Button, Grid, GridItem, Input } from '@westpac/ui';
 import { GithubIcon } from '@westpac/ui/icon';
 import Link from 'next/link';
 
+import { BrandKey } from '@/app/types/brand.types';
 import {
   AtlassianLogo,
   FacebookLogo,
@@ -17,10 +18,15 @@ import {
 
 import { Hero, Section, SectionHeading, SectionItem } from './components';
 
-export default function DesignSystemHomePage() {
+export default function DesignSystemHomePage({
+  searchParams,
+}: {
+  searchParams?: { [key: string]: string | undefined };
+}) {
+  const brand = (searchParams?.brand || 'wbc') as BrandKey;
   return (
     <>
-      <Hero />
+      <Hero brand={brand} />
       <Section>
         <SectionHeading>Accessible by design</SectionHeading>
         <Grid>