chore: Create layout components

Author: weaponsforge

client/src/common/layout/page/index.js

@@ -0,0 +1,13 @@
+import HeadComponent from '../head'
+
+export default function Page ({ children }) {
+  return (
+    <div style={{
+      height: '100vh',
+      width: '100%' }}
+    >
+      <HeadComponent />
+      { children }
+    </div>
+  )
+}

client/src/components/home/index.js

@@ -1,23 +1,26 @@
 import Link from 'next/link'
+import Page from '@/common/layout/page'
 import { Inter } from 'next/font/google'
 import styles from '@/styles/Home.module.css'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export default function HomeComponent() {
   return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <div className={styles.h2}>
-          <h1 className={inter.className}>
-            React Hooks Playground
-          </h1>
-        </div>
+    <Page>
+      <main className={styles.main}>
+        <div className={styles.description}>
+          <div className={styles.h2}>
+            <h1 className={inter.className}>
+              React Hooks Playground
+            </h1>
+          </div>
 
-        <Link href="/usesyncexternalstore" className={styles.card}>
-          useSyncExternalStore
-        </Link>
-      </div>
-    </main>
+          <Link href="/usesyncexternalstore" className={styles.card}>
+            useSyncExternalStore
+          </Link>
+        </div>
+      </main>
+    </Page>
   )
 }

client/src/components/usesyncexternalstore/index.js

@@ -0,0 +1,13 @@
+import Page from '@/common/layout/page'
+
+function UseSyncExternalStoreComponent () {
+  return (
+    <Page>
+      <h2>
+        UseSyncExternalStoreComponent
+      </h2>
+    </Page>
+  )
+}
+
+export default UseSyncExternalStoreComponent

client/src/pages/index.js

@@ -1,11 +1,5 @@
-import HeadComponent from '@/common/layout/head'
 import HomeComponent from '@/components/home'
 
 export default function Home() {
-  return (
-    <>
-      <HeadComponent />
-      <HomeComponent />
-    </>
-  )
+  return (<HomeComponent />)
 }

client/src/pages/usesyncexternalstore/index.js

@@ -1,15 +1,7 @@
-import HeadComponent from '@/common/layout/head'
+import UseSyncExternalStoreComponent from '@/components/usesyncexternalstore'
 
-function useSyncExternalStoreContainer () {
-  return (
-    <>
-      <HeadComponent />
-
-      <h2>
-        useSyncExternalStoreContainer
-      </h2>
-    </>
-  )
+function UseSyncExternalStore () {
+  return (<UseSyncExternalStoreComponent />)
 }
 
-export default useSyncExternalStoreContainer
+export default UseSyncExternalStore