AbdulElahGwaith/free-react-tailwind-admin-dashboard
0
1import { useState } from "react";2import { Link } from "react-router";3import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from "../../icons";4import Label from "../form/Label";5import Input from "../form/input/InputField";6import Checkbox from "../form/input/Checkbox";7import Button from "../ui/button/Button";8 9export default function SignInForm() {10 const [showPassword, setShowPassword] = useState(false);11 const [isChecked, setIsChecked] = useState(false);12 return (13 <div className="flex flex-col flex-1">14 <div className="w-full max-w-md pt-10 mx-auto">15 <Link16 to="/"17 className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"18 >19 <ChevronLeftIcon className="size-5" />20 Back to dashboard21 </Link>22 </div>23 <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">24 <div>25 <div className="mb-5 sm:mb-8">26 <h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md">27 Sign In28 </h1>29 <p className="text-sm text-gray-500 dark:text-gray-400">30 Enter your email and password to sign in!31 </p>32 </div>33 <div>34 <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5">35 <button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">36 <svg37 width="20"38 height="20"39 viewBox="0 0 20 20"40 fill="none"41 xmlns="http://www.w3.org/2000/svg"42 >43 <path44 d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z"45 fill="#4285F4"46 />47 <path48 d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z"49 fill="#34A853"50 />51 <path52 d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z"53 fill="#FBBC05"54 />55 <path56 d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z"57 fill="#EB4335"58 />59 </svg>60 Sign in with Google61 </button>62 <button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">63 <svg64 width="21"65 className="fill-current"66 height="20"67 viewBox="0 0 21 20"68 fill="none"69 xmlns="http://www.w3.org/2000/svg"70 >71 <path d="M15.6705 1.875H18.4272L12.4047 8.75833L19.4897 18.125H13.9422L9.59717 12.4442L4.62554 18.125H1.86721L8.30887 10.7625L1.51221 1.875H7.20054L11.128 7.0675L15.6705 1.875ZM14.703 16.475H16.2305L6.37054 3.43833H4.73137L14.703 16.475Z" />72 </svg>73 Sign in with X74 </button>75 </div>76 <div className="relative py-3 sm:py-5">77 <div className="absolute inset-0 flex items-center">78 <div className="w-full border-t border-gray-200 dark:border-gray-800"></div>79 </div>80 <div className="relative flex justify-center text-sm">81 <span className="p-2 text-gray-400 bg-white dark:bg-gray-900 sm:px-5 sm:py-2">82 Or83 </span>84 </div>85 </div>86 <form>87 <div className="space-y-6">88 <div>89 <Label>90 Email <span className="text-error-500">*</span>{" "}91 </Label>92 <Input placeholder="info@gmail.com" />93 </div>94 <div>95 <Label>96 Password <span className="text-error-500">*</span>{" "}97 </Label>98 <div className="relative">99 <Input100 type={showPassword ? "text" : "password"}101 placeholder="Enter your password"102 />103 <span104 onClick={() => setShowPassword(!showPassword)}105 className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2"106 >107 {showPassword ? (108 <EyeIcon className="fill-gray-500 dark:fill-gray-400 size-5" />109 ) : (110 <EyeCloseIcon className="fill-gray-500 dark:fill-gray-400 size-5" />111 )}112 </span>113 </div>114 </div>115 <div className="flex items-center justify-between">116 <div className="flex items-center gap-3">117 <Checkbox checked={isChecked} onChange={setIsChecked} />118 <span className="block font-normal text-gray-700 text-theme-sm dark:text-gray-400">119 Keep me logged in120 </span>121 </div>122 <Link123 to="/reset-password"124 className="text-sm text-brand-500 hover:text-brand-600 dark:text-brand-400"125 >126 Forgot password?127 </Link>128 </div>129 <div>130 <Button className="w-full" size="sm">131 Sign in132 </Button>133 </div>134 </div>135 </form>136 137 <div className="mt-5">138 <p className="text-sm font-normal text-center text-gray-700 dark:text-gray-400 sm:text-start">139 Don't have an account? {""}140 <Link141 to="/signup"142 className="text-brand-500 hover:text-brand-600 dark:text-brand-400"143 >144 Sign Up145 </Link>146 </p>147 </div>148 </div>149 </div>150 </div>151 </div>152 );153}154