From d8b3bfc0a1cb60b5fc69f18b677494a5bba469f4 Mon Sep 17 00:00:00 2001
From: samithaf <fernando.samitha@gmail.com>
Date: Wed, 17 Jan 2024 09:43:41 +1100
Subject: [PATCH] converted the hero component to be a server component

---
 .../hero/components/header/header.component.tsx        |  2 ++
 .../design-system/components/hero/hero.component.tsx   |  7 +------
 apps/site/src/app/design-system/page.tsx               | 10 ++++++++--
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/site/src/app/design-system/components/hero/components/header/header.component.tsx b/apps/site/src/app/design-system/components/hero/components/header/header.component.tsx
index f9206a1d9..9d4577752 100644
--- a/apps/site/src/app/design-system/components/hero/components/header/header.component.tsx
+++ b/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';
diff --git a/apps/site/src/app/design-system/components/hero/hero.component.tsx b/apps/site/src/app/design-system/components/hero/hero.component.tsx
index 4c2e4286a..6688655c8 100644
--- a/apps/site/src/app/design-system/components/hero/hero.component.tsx
+++ b/apps/site/src/app/design-system/components/hero/hero.component.tsx
@@ -1,8 +1,5 @@
-'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';
@@ -10,9 +7,7 @@ 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()}>
diff --git a/apps/site/src/app/design-system/page.tsx b/apps/site/src/app/design-system/page.tsx
index e54d47486..b1367dbb2 100644
--- a/apps/site/src/app/design-system/page.tsx
+++ b/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>