From 08ee215c4788e8e9db572afd1a128646a958c8a4 Mon Sep 17 00:00:00 2001
From: eshanized <m.eshanized@gmail.com>
Date: Fri, 20 Dec 2024 22:43:12 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs(=5Fexp):=20add=20explanatio?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Layout.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index ec6d2df..605317b 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,19 +1,26 @@
-import React from 'react';
-import { Header } from './Header';
-import { Footer } from './Footer';
+import React from 'react'; // Import the React library for creating React components.
+import { Header } from './Header'; // Import the `Header` component from the specified file.
+import { Footer } from './Footer'; // Import the `Footer` component from the specified file.
 
+// Define the props type for the `Layout` component.
+// `children` is a special React prop that represents the content passed between the opening and closing tags of the component.
 interface LayoutProps {
-  children: React.ReactNode;
+  children: React.ReactNode; // `children` can be any valid React node (elements, strings, numbers, fragments, etc.).
 }
 
+// Define and export the `Layout` functional component, which accepts `LayoutProps` as props.
 export function Layout({ children }: LayoutProps) {
+  // Render the component structure.
   return (
     <div className="flex flex-col min-h-screen">
-      <Header />
+      {/* The main container is styled as a flexbox with a column direction and a minimum height to fill the screen. */}
+      <Header /> {/* Render the `Header` component at the top of the layout. */}
       <main className="flex-grow">
+        {/* Render the `children` prop inside the `main` section. 
+            `flex-grow` allows this section to expand and take up the remaining available space. */}
         {children}
       </main>
-      <Footer />
+      <Footer /> {/* Render the `Footer` component at the bottom of the layout. */}
     </div>
   );
-}
\ No newline at end of file
+}