click signin icon

This commit is contained in:
2024-12-13 12:23:43 -05:00
parent 8337ed770b
commit 3f5a8288d5

View File

@@ -2,6 +2,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import constants from '@src/lib/constants'; import constants from '@src/lib/constants';
import Link from 'next/link';
export default function SignupPage() { export default function SignupPage() {
const router = useRouter(); const router = useRouter();
@@ -46,124 +47,126 @@ export default function SignupPage() {
return ( return (
<div className="flex min-h-screen flex-1"> <div className="flex min-h-screen flex-1">
<div className="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24"> <div className="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
<div className="mx-auto w-full max-w-sm lg:w-96"> <div className="mx-auto w-full max-w-sm lg:w-96">
<div> <div>
<Link href={"/"}>
<img <img
alt={constants.APP_NAME} alt={constants.APP_NAME}
src="https://tailwindui.com/plus/img/logos/mark.svg?color=lime&shade=600" src="https://tailwindui.com/plus/img/logos/mark.svg?color=lime&shade=600"
className="h-10 w-auto" className="h-10 w-auto"
/> />
<h2 className="mt-8 text-2xl/9 font-bold tracking-tight text-gray-900">Sign in to your account</h2> </Link>
<p className="mt-2 text-sm/6 text-gray-500"> <h2 className="mt-8 text-2xl/9 font-bold tracking-tight text-gray-900">Sign in to your account</h2>
Not a member?{' '} <p className="mt-2 text-sm/6 text-gray-500">
<a href="#" className="font-semibold text-lime-700 hover:text-lime-800"> Not a member?{' '}
Create An Account <a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
</a> Create An Account
</p> </a>
</div> </p>
</div>
<div className="mt-10"> <div className="mt-10">
<div> <div>
<form action="#" method="POST" className="space-y-6"> <form action="#" method="POST" className="space-y-6">
<div> <div>
<label htmlFor="email" className="block text-sm/6 font-medium text-gray-900"> <label htmlFor="email" className="block text-sm/6 font-medium text-gray-900">
Email address Email address
</label> </label>
<div className="mt-2"> <div className="mt-2">
<input <input
id="email" id="email"
name="email" name="email"
type="email" type="email"
required required
autoComplete="email" autoComplete="email"
className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
/> />
</div>
</div> </div>
</div>
<div> <div>
<label htmlFor="password" className="block text-sm/6 font-medium text-gray-900"> <label htmlFor="password" className="block text-sm/6 font-medium text-gray-900">
Password Password
</label> </label>
<div className="mt-2"> <div className="mt-2">
<input <input
id="password" id="password"
name="password" name="password"
type="password" type="password"
required required
autoComplete="current-password" autoComplete="current-password"
className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
/> />
</div>
</div> </div>
</div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex gap-3"> <div className="flex gap-3">
<div className="flex h-6 shrink-0 items-center"> <div className="flex h-6 shrink-0 items-center">
<div className="group grid size-4 grid-cols-1"> <div className="group grid size-4 grid-cols-1">
<input <input
id="remember-me" id="remember-me"
name="remember-me" name="remember-me"
type="checkbox" type="checkbox"
className="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto" className="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
/>
<svg
fill="none"
viewBox="0 0 14 14"
className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
>
<path
d="M3 8L6 11L11 3.5"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="opacity-0 group-has-[:checked]:opacity-100"
/> />
<svg <path
fill="none" d="M3 7H11"
viewBox="0 0 14 14" strokeWidth={2}
className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25" strokeLinecap="round"
> strokeLinejoin="round"
<path className="opacity-0 group-has-[:indeterminate]:opacity-100"
d="M3 8L6 11L11 3.5" />
strokeWidth={2} </svg>
strokeLinecap="round"
strokeLinejoin="round"
className="opacity-0 group-has-[:checked]:opacity-100"
/>
<path
d="M3 7H11"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="opacity-0 group-has-[:indeterminate]:opacity-100"
/>
</svg>
</div>
</div> </div>
<label htmlFor="remember-me" className="block text-sm/6 text-gray-900">
Remember me
</label>
</div>
<div className="text-sm/6">
<a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
Forgot password?
</a>
</div> </div>
<label htmlFor="remember-me" className="block text-sm/6 text-gray-900">
Remember me
</label>
</div> </div>
<div> <div className="text-sm/6">
<button <a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
type="submit" Forgot password?
className="flex w-full justify-center rounded-md bg-lime-700 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm hover:bg-lime-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-800" </a>
>
Sign in
</button>
</div> </div>
</form> </div>
</div>
<div>
<button
type="submit"
className="flex w-full justify-center rounded-md bg-lime-700 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm hover:bg-lime-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-800"
>
Sign in
</button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
<div className="relative hidden w-0 flex-1 lg:block">
<img
alt=""
src="https://images.unsplash.com/photo-1682876747535-a13486e9a726?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
className="absolute inset-0 size-full object-cover"
/>
</div>
</div> </div>
<div className="relative hidden w-0 flex-1 lg:block">
<img
alt=""
src="https://images.unsplash.com/photo-1682876747535-a13486e9a726?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
className="absolute inset-0 size-full object-cover"
/>
</div>
</div>
); );
} }