From d281f96a4007f1e2da152265073cac0899ba1e88 Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
Date: Wed, 27 Jul 2022 19:32:37 +0300
Subject: [PATCH 1/2] create BaseLayout component and create page layout schema

---
 src/components/BaseLayout.tsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/components/BaseLayout.tsx

diff --git a/src/components/BaseLayout.tsx b/src/components/BaseLayout.tsx
new file mode 100644
index 0000000..90a23d1
--- /dev/null
+++ b/src/components/BaseLayout.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+type Props = {
+    header?: React.ReactElement,
+    children: React.ReactNode,
+    footer?: React.ReactElement,
+}
+
+function BaseLayout({header, footer, children}: Props) {
+    return (
+    <>
+        <header>
+            {header}
+        </header>
+
+        <main>
+            {children}
+        </main>
+
+        <footer>
+            {footer}
+        </footer>
+    </>
+    );
+  }
+  
+  export default BaseLayout;
+  
\ No newline at end of file

From a729078328979e3844d6d1d475ceb13ad0f0bf86 Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
Date: Thu, 28 Jul 2022 23:27:51 +0300
Subject: [PATCH 2/2] Added the className property and applied it to the div
 instead of the ReactFragment tag.

---
 src/components/BaseLayout.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/BaseLayout.tsx b/src/components/BaseLayout.tsx
index 90a23d1..e5331df 100644
--- a/src/components/BaseLayout.tsx
+++ b/src/components/BaseLayout.tsx
@@ -3,11 +3,12 @@ type Props = {
     header?: React.ReactElement,
     children: React.ReactNode,
     footer?: React.ReactElement,
+    className : string,
 }
 
-function BaseLayout({header, footer, children}: Props) {
+function BaseLayout( { header, footer, children, className }: Props ) {
     return (
-    <>
+    <div className={className}>
         <header>
             {header}
         </header>
@@ -19,7 +20,7 @@ function BaseLayout({header, footer, children}: Props) {
         <footer>
             {footer}
         </footer>
-    </>
+    </div>
     );
   }