Add base app

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