Add base app

pages/_app.tsx

@@ -0,0 +1,8 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

pages/home/index.tsx

@@ -0,0 +1,22 @@
+import { NextPage } from 'next'
+import HomeLayout from '../../components/layout/home/HomeLayout'
+import CreateWish from '../../components/domain/wishes/createWish/CreateWish'
+
+const HomePage: NextPage = (props) => {
+  return (
+    <HomeLayout page="home">
+      <div>
+        <CreateWish
+          onSubmit={(wish) => {
+            console.log(wish)
+          }}
+          onFocus={() => {
+            console.log('focused')
+          }}
+        />
+      </div>
+    </HomeLayout>
+  )
+}
+
+export default HomePage

pages/index.tsx

@@ -0,0 +1,29 @@
+import type { NextPage } from 'next'
+import Link from 'next/link'
+import { FC } from 'react'
+
+interface CtaLinkProps {
+  page: string
+}
+const CtaLink: FC<CtaLinkProps> = (props) => (
+  <Link href={props.page}>
+    <a className="underline hover:text-gray-200">{props.children}</a>
+  </Link>
+)
+
+const Home: NextPage = () => {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-pink-400">
+      <main className="space-y-8 flex flex-col items-center">
+        <h1 className="text-6xl">Wishes</h1>
+        <div className="space-x-3">
+          <CtaLink page="/sign-up">Create account</CtaLink>
+          <span>or</span>
+          <CtaLink page="/sign-in">Login</CtaLink>
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default Home

pages/sign-in.tsx

@@ -0,0 +1,40 @@
+import { NextPage } from 'next'
+import AuthLayout, {
+  AuthInput,
+  AuthPassword,
+} from '../components/layout/authentication/AuthLayout'
+import Link from '../components/common/Link'
+
+const SignInPage: NextPage = () => {
+  return (
+    <AuthLayout>
+      <div className="space-y-8">
+        <h2 className="text-xl text-pink-300">Sign in</h2>
+        <div>
+          <form className="space-y-8">
+            <div className="space-y-3">
+              <AuthInput name="username" required>
+                Username
+              </AuthInput>
+              <AuthPassword name="password" required>
+                Password
+              </AuthPassword>
+            </div>
+            <button
+              type="submit"
+              className="w-full py-2 px-4 rounded bg-pink-300 text-white font-bold"
+            >
+              Ok
+            </button>
+          </form>
+        </div>
+
+        <Link page="/sign-up" className="text-center block text-gray-600">
+          Sign up instead?
+        </Link>
+      </div>
+    </AuthLayout>
+  )
+}
+
+export default SignInPage

pages/sign-up.tsx

@@ -0,0 +1,43 @@
+import { NextPage } from 'next'
+import AuthLayout, {
+  AuthInput,
+  AuthPassword,
+} from '../components/layout/authentication/AuthLayout'
+import Link from '../components/common/Link'
+
+const SignUpPage: NextPage = () => {
+  return (
+    <AuthLayout>
+      <div className="space-y-8">
+        <h2 className="text-xl text-pink-300">Sign Up</h2>
+        <div>
+          <form className="space-y-8">
+            <div className="space-y-3">
+              <AuthInput name="username" required>
+                Username
+              </AuthInput>
+              <AuthPassword name="password" required>
+                Password
+              </AuthPassword>
+              <AuthPassword name="confirm-password" required>
+                Confirm Password
+              </AuthPassword>
+            </div>
+            <button
+              type="submit"
+              className="w-full py-2 px-4 rounded bg-pink-300 text-white font-bold"
+            >
+              Ok
+            </button>
+          </form>
+        </div>
+
+        <Link page="/sign-in" className="text-center block text-gray-600">
+          Sign in instead?
+        </Link>
+      </div>
+    </AuthLayout>
+  )
+}
+
+export default SignUpPage