Layout

The Layout component sets up the basic structure for all webpages
It receives two properties :

title (for the webpage title)

children (for the page content)

Layout.js

export default function Layout({ title, children }) {
  return (
    <>
      <Head>
        <title>{title ? title + " - TechShop" : "TechShop"}</title>
        <meta name="description" content="Ecommerce Website" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="Logo.png" />
      </Head>
      <div className="flex min-h-screen flex-col justify-between ">
        <header>
          <Announcement />
          <Navbar />
        </header>
        <main className="container m-auto mt-4 px-4">{children}</main>
        <Footer />
      </div>
    </>
  );
}

Purpose of the Layout Component

By using the Layout component, all pages of the website share the same Navbar , Footer,and other essential components (Like Announcement). Acting as a common "parent" component, it encapsulates the fundamental layout elements and ensures that each page follows a unified design pattern.

Common Components

<Announcement />
<Navbar />
<Footer />

Introduction Home