Add base app

components/layout/authentication/AuthLayout.module.scss

@@ -0,0 +1,4 @@
+.root {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+}

components/layout/authentication/AuthLayout.tsx

@@ -0,0 +1,55 @@
+import { FC } from 'react'
+import styles from './AuthLayout.module.scss'
+
+const AuthLayout: FC = (props) => (
+  <div className={`${styles.root} min-h-screen`}>
+    <aside className="bg-pink-300 flex justify-center items-center">
+      <h1 className="text-4xl">Wishes</h1>
+    </aside>
+    <main className="flex flex-col justify-center items-center">
+      <div>{props.children}</div>
+    </main>
+  </div>
+)
+
+interface AuthFieldProps {
+  name: string
+  required?: boolean
+  type: 'text' | 'password'
+}
+const AuthField: FC<AuthFieldProps> = (props) => {
+  return (
+    <div>
+      <label
+        htmlFor={props.name}
+        className="block text-gray-800 text-sm font-bold mb-2"
+      >
+        {props.children}
+      </label>
+      <input
+        type="text"
+        name={props.name}
+        required
+        className="appearance-none border rounded w-full py-2 px-3 text-gray-800 leading-tight"
+      />
+    </div>
+  )
+}
+
+interface AuthPasswordProps {
+  name: string
+  required?: boolean
+}
+export const AuthPassword: FC<AuthPasswordProps> = (props) => (
+  <AuthField {...props} type="password" />
+)
+
+interface AuthInputProps {
+  name: string
+  required?: boolean
+}
+export const AuthInput: FC<AuthPasswordProps> = (props) => (
+  <AuthField {...props} type="text" />
+)
+
+export default AuthLayout

components/layout/home/HomeLayout.module.scss

@@ -0,0 +1,6 @@
+.root {
+  display: grid;
+  grid-template-columns: 1fr 3fr 1fr;
+  max-width: 60%;
+  margin: 0 auto;
+}

components/layout/home/HomeLayout.tsx

@@ -0,0 +1,21 @@
+import { FC, ReactElement } from 'react'
+import { inspect } from 'util'
+import styles from './HomeLayout.module.scss'
+
+interface HomeLayoutProps {
+  page: string
+}
+const HomeLayout: FC<HomeLayoutProps> = (props) => {
+  return (
+    <div className={styles.root + ' space-x-6 pt-14'}>
+      <h1 className="text-2xl space-x-2">
+        <span>Wishes</span>
+        <span>/</span>
+        <span>{props.page}</span>
+      </h1>
+      <main className="pt-20">{props.children}</main>
+    </div>
+  )
+}
+
+export default HomeLayout