make colelctions optional in react component

src/pages/[slug].astro

@@ -1,4 +1,6 @@
 ---
+export const prerender = true
+
 import Layout from '../layouts/Layout.astro'
 import '../styles/globals.css'
 import { Header } from '../sections/Header'

src/pages/index.astro

@@ -1,4 +1,6 @@
 ---
+export const prerender = true
+
 import Layout from '../layouts/Layout.astro'
 import '../styles/globals.css'
 import { Header } from '../sections/Header'
@@ -33,7 +35,6 @@ const menuItems = (menuItemsResult.data?.categories?.filter(c => c != null) ?? [
 
 const solutionCategories = menuItems.filter(c => c.group === Enum_Category_Group.Solution)
 const serviceCategories = menuItems.filter(c => c.group === Enum_Category_Group.Service)
-console.log(solutionCategories);
 ---
 
 <Layout>

src/sections/Footer.tsx

@@ -7,11 +7,11 @@ import type { SiteConfigContact } from '../lib/cms/contact/types'
 type CategoryNavItem = NonNullable<MenuItemsQuery['categories'][number]>
 
 export interface FooterProps {
-  contacts: readonly SiteConfigContact[]
-  solutionCategories: CategoryNavItem[]
+  contacts?: readonly SiteConfigContact[]
+  solutionCategories?: CategoryNavItem[]
 }
 
-export function Footer({ contacts, solutionCategories }: FooterProps) {
+export function Footer({ contacts = [], solutionCategories = [] }: FooterProps) {
   return (
     <footer className="bg-gray-900 text-gray-400 pt-20 pb-10 border-t border-gray-800">
       <div className="max-w-400 mx-auto px-6 xl:px-12 2xl:px-16">

src/sections/Header.tsx

@@ -8,12 +8,12 @@ import { navigateHomeSectionAnchor } from '../lib/scrollToHash'
 type CategoryNavItem = NonNullable<MenuItemsQuery['categories'][number]>
 
 export interface HeaderProps {
-  contacts: readonly SiteConfigContact[]
-  solutions: readonly CategoryNavItem[]
-  services: readonly CategoryNavItem[]
+  contacts?: readonly SiteConfigContact[]
+  solutions?: readonly CategoryNavItem[]
+  services?: readonly CategoryNavItem[]
 }
 
-export function Header({ contacts, solutions, services }: HeaderProps) {
+export function Header({ contacts = [], solutions = [], services = [] }: HeaderProps) {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [isSolutionsOpen, setIsSolutionsOpen] = useState(false)
   const [isServicesOpen, setIsServicesOpen] = useState(false)

src/views/CategoryView.tsx

@@ -8,7 +8,7 @@ export type CategoryViewProps = {
   badge?: string
 } & ComponentProps<typeof Vendors>
 
-export function CategoryView({ title, description, vendors, badge }: CategoryViewProps) {
+export function CategoryView({ title, description, vendors = [], badge }: CategoryViewProps) {
   return (
     <div className="min-h-screen bg-gray-50">
       <CategoryPageHero badge={badge} title={title} description={description} />

src/views/HomePage.tsx

@@ -58,10 +58,10 @@ function parseHomeSections(home: Maybe<HomePageData>) {
 
 export interface HomePageProps {
   homePage?: Maybe<HomePageData>
-  contacts: readonly SiteConfigContact[]
+  contacts?: readonly SiteConfigContact[]
 }
 
-export function HomePage({ homePage, contacts }: HomePageProps) {
+export function HomePage({ homePage, contacts = [] }: HomePageProps) {
   const [contactOpen, setContactOpen] = useState(false)
   const { hero, services, solutions, cases, about } = parseHomeSections(homePage ?? null)