Add new sign up page ui

Author: alphacoder-mp3

app/(auth)/signup/page.tsx

@@ -1,10 +1,5 @@
 import SignUp from '@/components/sign-up';
 
 export default function SignUpPage() {
-  return (
-    <div className="container absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]">
-      <h1 className="text-2xl font-bold mb-4 text-center">Sign Up</h1>
-      <SignUp />
-    </div>
-  );
+  return <SignUp />;
 }

components/sign-up.tsx

@@ -5,6 +5,18 @@ import { signUp } from '@/app/actions/auth-actions';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+import { UserIcon } from 'lucide-react';
+
 export default function SignUp() {
   const formRef = useRef<HTMLFormElement>(null);
   const router = useRouter();
@@ -24,65 +36,91 @@ export default function SignUp() {
     <form
       ref={formRef}
       action={handleSignUp}
-      className="space-y-4 max-w-md mx-auto"
+      className="min-h-screen flex items-center justify-center bg-[url('@/public/loader.svg?height=400&width=400')] bg-repeat p-4"
     >
-      <div>
-        <label htmlFor="username" className="block text-sm font-medium ">
-          Username
-        </label>
-        <input
-          type="text"
-          name="username"
-          id="username"
-          required
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-        />
-      </div>
-      <div>
-        <label htmlFor="password" className="block text-sm font-medium ">
-          Password
-        </label>
-        <input
-          type="password"
-          name="password"
-          id="password"
-          required
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-        />
-      </div>
-      <div>
-        <label htmlFor="firstName" className="block text-sm font-medium ">
-          First Name
-        </label>
-        <input
-          type="text"
-          name="firstName"
-          id="firstName"
-          required
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-        />
-      </div>
-      <div>
-        <label htmlFor="lastName" className="block text-sm font-medium ">
-          Last Name
-        </label>
-        <input
-          type="text"
-          name="lastName"
-          id="lastName"
-          required
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-        />
-      </div>
-      <Link className=" text-indigo-600" href={'/signin'}>
-        Already a user? Sign in
-      </Link>
-      <button
-        type="submit"
-        className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-      >
-        Sign Up
-      </button>
+      <Card className="w-full max-w-md shadow-lg">
+        <CardHeader className="space-y-1 flex flex-col items-center">
+          <div className="bg-primary text-primary-foreground p-3 rounded-full">
+            <UserIcon className="h-6 w-6" />
+          </div>
+          <h1 className="text-2xl font-bold">Register your account</h1>
+          <p className="text-muted-foreground">Enter the following details</p>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="firstName">First Name</Label>
+            <Input
+              type="text"
+              name="firstName"
+              id="firstName"
+              placeholder="Enter your first name"
+              required
+            />
+          </div>
+          <div>
+            <Label htmlFor="lastName">Last Name</Label>
+            <Input
+              type="text"
+              name="lastName"
+              id="lastName"
+              placeholder="Enter your last name"
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <Input
+              id="username"
+              type="text"
+              name="username"
+              placeholder="Enter your username"
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              name="password"
+              placeholder="Enter your password"
+              required
+            />
+          </div>
+          <Button className="w-full" type="submit">
+            Sign Up
+          </Button>
+        </CardContent>
+        <CardFooter className="flex flex-col space-y-4">
+          {/* <div className="relative w-full">
+              <div className="absolute inset-0 flex items-center">
+                <span className="w-full border-t" />
+              </div>
+              <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-background px-2 text-muted-foreground">
+                  Or continue with
+                </span>
+              </div>
+            </div>
+            <div className="flex space-x-2">
+              <Button variant="outline" className="w-full">
+                Google
+              </Button>
+              <Button variant="outline" className="w-full">
+                GitHub
+              </Button>
+            </div> */}
+          <p className="text-center text-sm text-muted-foreground">
+            Already a user?{' '}
+            <Link
+              href="/signin"
+              className="underline underline-offset-4 hover:text-primary"
+            >
+              Sign in
+            </Link>
+          </p>
+        </CardFooter>
+      </Card>
     </form>
   );
 }