Skip to content

Commit a255c18

Browse files
alphacoder-mp3alphacoder-mp3
committed
Add # page update, add new svgs, remove vercel and next svgs
1 parent 407a4b3 commit a255c18

File tree

9 files changed

+1425
-42
lines changed

9 files changed

+1425
-42
lines changed

‎app/(auth)/signin/page.tsx

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import SignIn from '@/components/sign-in';
22

33
export default function SignInPage() {
4-
return (
5-
<div className="container absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]">
6-
<h1 className="text-2xl font-bold mb-4 text-center">#</h1>
7-
<SignIn />
8-
</div>
9-
);
4+
return <SignIn />;
105
}

‎components/sign-in.tsx

+78-34
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,18 @@ import { signIn } from '@/app/actions/auth-actions';
55
import { useRouter } from 'next/navigation';
66
import Link from 'next/link';
77

8+
import { Button } from '@/components/ui/button';
9+
import {
10+
Card,
11+
CardContent,
12+
CardFooter,
13+
CardHeader,
14+
} from '@/components/ui/card';
15+
import { Input } from '@/components/ui/input';
16+
import { Label } from '@/components/ui/label';
17+
18+
import { UserIcon } from 'lucide-react';
19+
820
export default function SignIn() {
921
const formRef = useRef<HTMLFormElement>(null);
1022
const router = useRouter();
@@ -24,41 +36,73 @@ export default function SignIn() {
2436
<form
2537
ref={formRef}
2638
action={handleSignIn}
27-
className="space-y-4 max-w-md mx-auto"
39+
className="min-h-screen flex items-center justify-center bg-[url('@/public/loader.svg?height=400&width=400')] bg-repeat p-4"
2840
>
29-
<div>
30-
<label htmlFor="username" className="block text-sm font-medium ">
31-
Username
32-
</label>
33-
<input
34-
type="text"
35-
name="username"
36-
id="username"
37-
required
38-
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"
39-
/>
40-
</div>
41-
<div>
42-
<label htmlFor="password" className="block text-sm font-medium ">
43-
Password
44-
</label>
45-
<input
46-
type="password"
47-
name="password"
48-
id="password"
49-
required
50-
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"
51-
/>
52-
</div>
53-
<Link className=" text-indigo-600" href={'/#'}>
54-
Not a user? Register
55-
</Link>
56-
<button
57-
type="submit"
58-
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"
59-
>
60-
#
61-
</button>
41+
<Card className="w-full max-w-md shadow-lg">
42+
<CardHeader className="space-y-1 flex flex-col items-center">
43+
<div className="bg-primary text-primary-foreground p-3 rounded-full">
44+
<UserIcon className="h-6 w-6" />
45+
</div>
46+
<h1 className="text-2xl font-bold"># to your account</h1>
47+
<p className="text-muted-foreground">
48+
Enter your credentials to access your account
49+
</p>
50+
</CardHeader>
51+
<CardContent className="space-y-4">
52+
<div className="space-y-2">
53+
<Label htmlFor="username">Username</Label>
54+
<Input
55+
id="username"
56+
type="text"
57+
name="username"
58+
placeholder="Enter your username"
59+
required
60+
/>
61+
</div>
62+
<div className="space-y-2">
63+
<Label htmlFor="password">Password</Label>
64+
<Input
65+
id="password"
66+
type="password"
67+
name="password"
68+
placeholder="Enter your password"
69+
required
70+
/>
71+
</div>
72+
<Button className="w-full" type="submit">
73+
#
74+
</Button>
75+
</CardContent>
76+
<CardFooter className="flex flex-col space-y-4">
77+
{/* <div className="relative w-full">
78+
<div className="absolute inset-0 flex items-center">
79+
<span className="w-full border-t" />
80+
</div>
81+
<div className="relative flex justify-center text-xs uppercase">
82+
<span className="bg-background px-2 text-muted-foreground">
83+
Or continue with
84+
</span>
85+
</div>
86+
</div>
87+
<div className="flex space-x-2">
88+
<Button variant="outline" className="w-full">
89+
Google
90+
</Button>
91+
<Button variant="outline" className="w-full">
92+
GitHub
93+
</Button>
94+
</div> */}
95+
<p className="text-center text-sm text-muted-foreground">
96+
Not a user?{' '}
97+
<Link
98+
href="/#"
99+
className="underline underline-offset-4 hover:text-primary"
100+
>
101+
Register here
102+
</Link>
103+
</p>
104+
</CardFooter>
105+
</Card>
62106
</form>
63107
);
64108
}

‎components/ui/label.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as LabelPrimitive from "@radix-ui/react-label"
5+
import { cva, type VariantProps } from "class-variance-authority"
6+
7+
import { cn } from "@/lib/utils"
8+
9+
const labelVariants = cva(
10+
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11+
)
12+
13+
const Label = React.forwardRef<
14+
React.ElementRef<typeof LabelPrimitive.Root>,
15+
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16+
VariantProps<typeof labelVariants>
17+
>(({ className, ...props }, ref) => (
18+
<LabelPrimitive.Root
19+
ref={ref}
20+
className={cn(labelVariants(), className)}
21+
{...props}
22+
/>
23+
))
24+
Label.displayName = LabelPrimitive.Root.displayName
25+
26+
export { Label }

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@radix-ui/react-dialog": "^1.1.1",
1717
"@radix-ui/react-dropdown-menu": "^2.1.1",
1818
"@radix-ui/react-icons": "^1.3.0",
19+
"@radix-ui/react-label": "^2.1.0",
1920
"@radix-ui/react-slot": "^1.1.0",
2021
"@radix-ui/react-toast": "^1.2.1",
2122
"bcryptjs": "^2.4.3",

0 commit comments

Comments
 (0)