Create page: Sign Up

src/app/auth/page.tsx

@@ -0,0 +1,18 @@
+import { functionComponent } from 'react';
+import AuthForm from '@/components/AuthForm';
+
+const AuthPage: functionComponent = () => {
+  const handleSignInSubmit = (username: string, password: string) => {
+    // Logic for handling sign in with username and password
+  };
+
+  return (
+    <div className="bg-gray-900 text-white flex items-center justify-center min-h-screen">
+      <div className="w-full max-w-xs">
+        <AuthForm onSubmit={handleSignInSubmit} />
+      </div>
+    </div>
+  );
+};
+
+export default AuthPage;

src/components/AuthForm.tsx

@@ -0,0 +1,35 @@
+import { functionComponent } from 'react';
+import Input from '@/components/ui/input';
+import Label from '@/components/ui/label';
+import SignInButton from '@/components/auth/SignInButton';
+import SignInWithGoogleButton from '@/components/auth/SignInWithGoogleButton';
+import CreateAccountLink from '@/components/auth/CreateAccountLink';
+
+interface AuthFormProps {
+  onSubmit: (username: string, password: string) => void;
+}
+
+const AuthForm: functionComponent<AuthFormProps> = ({ onSubmit }) => {
+  return (
+    <form className="bg-gray-800 shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={(e) => {
+      e.preventDefault();
+      const username = e.target.elements.username.value;
+      const password = e.target.elements.password.value;
+      onSubmit(username, password);
+    }}>
+      <div className="mb-4">
+        <Label htmlFor="username" text="Username" />
+        <Input id="username" type="text" placeholder="user@edu.com" />
+      </div>
+      <div className="mb-6">
+        <Label htmlFor="password" text="Password" />
+        <Input id="password" type="password" placeholder="******************" />
+      </div>
+      <SignInButton />
+      <CreateAccountLink />
+      <SignInWithGoogleButton />
+    </form>
+  );
+};
+
+export default AuthForm;

src/components/CreateAccountLink.tsx

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

src/components/SignInButton.tsx

@@ -0,0 +1,14 @@
+import { functionComponent } from 'react';
+import Button from '@/components/ui/button';
+
+const SignInButton: functionComponent = () => {
+  return (
+    <div className="flex items-center justify-between">
+      <Button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
+        Sign in
+      </Button>
+    </div>
+  );
+};
+
+export default SignInButton;

src/components/SignInWithGoogleButton.tsx

@@ -0,0 +1,15 @@
+import { functionComponent } from 'react';
+import Button from '@/components/ui/button';
+
+const SignInWithGoogleButton: functionComponent = () => {
+  return (
+    <div className="mt-6">
+      <Button className="google-btn font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full flex items-center justify-center" type="button">
+        <img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="Google Logo" className="mr-2" />
+        Sign in with Google
+      </Button>
+    </div>
+  );
+};
+
+export default SignInWithGoogleButton;