From 2a1271cbd47b3cccb188721d70def8db0df360c8 Mon Sep 17 00:00:00 2001
From: Web Spinner Bot <hello@web-spinner.ai>
Date: Sun, 17 Dec 2023 23:04:09 +0000
Subject: [PATCH] Create page: Sign Up

---
 src/app/auth/login/page.tsx           | 18 ++++++++++++++++++
 src/components/CreateAccountLink.tsx  | 14 ++++++++++++++
 src/components/GoogleSignInButton.tsx | 15 +++++++++++++++
 src/components/SignInForm.tsx         | 24 ++++++++++++++++++++++++
 4 files changed, 71 insertions(+)
 create mode 100644 src/app/auth/login/page.tsx
 create mode 100644 src/components/CreateAccountLink.tsx
 create mode 100644 src/components/GoogleSignInButton.tsx
 create mode 100644 src/components/SignInForm.tsx

diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
new file mode 100644
index 0000000..59eee2e
--- /dev/null
+++ b/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;
diff --git a/src/components/CreateAccountLink.tsx b/src/components/CreateAccountLink.tsx
new file mode 100644
index 0000000..5d4a394
--- /dev/null
+++ b/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;
diff --git a/src/components/GoogleSignInButton.tsx b/src/components/GoogleSignInButton.tsx
new file mode 100644
index 0000000..f827cd7
--- /dev/null
+++ b/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;
diff --git a/src/components/SignInForm.tsx b/src/components/SignInForm.tsx
new file mode 100644
index 0000000..2623577
--- /dev/null
+++ b/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;