Create page: Sign Up

src/app/auth/login/page.tsx

@@ -0,0 +1,18 @@
+import { FunctionComponent } from 'react';
+import SignInForm from '@/components/SignInForm';
+import GoogleSignInButton from '@/components/GoogleSignInButton';
+import CreateAccountLink from '@/components/CreateAccountLink';
+
+const LoginPage: FunctionComponent = () => {
+  return (
+    <div className="bg-gray-900 text-white h-screen flex justify-center items-center">
+      <div className="w-full max-w-xs mx-auto">
+        <SignInForm />
+        <CreateAccountLink />
+        <GoogleSignInButton />
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

src/components/CreateAccountLink.tsx

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+import Link from 'next/link';
+
+const CreateAccountLink: FunctionComponent = () => {
+  return (
+    <Link href="/auth/register">
+      <a className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800">
+        Create an account
+      </a>
+    </Link>
+  );
+};
+
+export default CreateAccountLink;

src/components/GoogleSignInButton.tsx

@@ -0,0 +1,15 @@
+import { FunctionComponent } from 'react';
+import '@/styles/GoogleSignInButton.css';
+
+const GoogleSignInButton: FunctionComponent = () => {
+  return (
+    <button className="google-btn hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full flex justify-center items-center">
+      <div className="google-icon-wrapper">
+        <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google logo" className="google-icon" />
+      </div>
+      Sign in with Google
+    </button>
+  );
+};
+
+export default GoogleSignInButton;

src/components/SignInForm.tsx

@@ -0,0 +1,24 @@
+import { FunctionComponent } from 'react';
+import Label from '@/components/ui/label';
+import Input from '@/components/ui/input';
+import Button from '@/components/ui/button';
+
+const SignInForm: FunctionComponent = () => {
+  return (
+    <form className="bg-gray-800 shadow-md rounded px-8 pt-6 pb-8 mb-4">
+      <div className="mb-4">
+        <Label htmlFor="username" value="Username" />
+        <Input id="username" type="text" placeholder="username@edu" />
+      </div>
+      <div className="mb-6">
+        <Label htmlFor="password" value="Password" />
+        <Input id="password" type="password" placeholder="******************" />
+      </div>
+      <div className="flex items-center justify-between">
+        <Button type="submit" color="blue" text="Sign in" />
+      </div>
+    </form>
+  );
+};
+
+export default SignInForm;