devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extracted the Input into its own component

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-15 10:10:33 +01:00
parent 60217e9a66
commit 65ebdd7dde
4 changed files with 76 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/Low/Input.tsx Normal file
View File

@@ -0,0 +1,61 @@
import {useState} from "react";
interface Props {
type: "email" | "text" | "password";
required?: boolean;
label?: string;
placeholder?: string;
name: string;
onChange: (value: string) => void;
}
export default function Input({type, label, placeholder, name, required = false, onChange}: Props) {
const [showPassword, setShowPassword] = useState(false);
if (type === "password") {
return (
<div className="relative flex flex-col gap-3 w-full">
{label && (
<label className="font-normal text-base text-mti-gray-dim">
{label}
{required ? " *" : ""}
</label>
)}
<div className="w-full h-fit relative">
<input
type={showPassword ? "text" : "password"}
name={name}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
/>
<p
role="button"
onClick={() => setShowPassword((prev) => !prev)}
className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
{showPassword ? "Hide" : "Show"}
</p>
</div>
</div>
);
}
return (
<div className="flex flex-col gap-3 w-full">
{label && (
<label className="font-normal text-base text-mti-gray-dim">
{label}
{required ? " *" : ""}
</label>
)}
<input
type={type}
name={name}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
required={required}
/>
</div>
);
}

2
src/components/Navbar.tsx
View File

@@ -11,7 +11,7 @@ export default function Navbar({user}: Props) {
<header className="w-full bg-transparent py-4 gap-2 flex items-center">
<h1 className="font-bold text-2xl w-1/6 px-8">eCrop</h1>
<div className="flex justify-between w-5/6 mr-8">
<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 shadow-lg shadow-neutral-200 outline-none" />
<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none" />
<div className="flex gap-3 items-center justify-end">
<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full" />
<span className="text-right">{user.name}</span>

31
src/pages/login.tsx
View File

@@ -9,6 +9,7 @@ import {Divider} from "primereact/divider";
import Button from "@/components/Low/Button";
import {BsArrowRepeat} from "react-icons/bs";
import Link from "next/link";
import Input from "@/components/Low/Input";
export default function Login() {
const [email, setEmail] = useState("");
@@ -62,34 +63,8 @@ export default function Login() {
</div>
<Divider className="max-w-md" />
<form className="flex flex-col items-center gap-6 w-1/2" onSubmit={login}>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Email address</label>
<input
type="email"
name="email"
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email address"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
</div>
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Password</label>
<div className="w-full h-fit relative">
<input
type={showPassword ? "text" : "password"}
name="password"
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
<p
role="button"
onClick={() => setShowPassword((prev) => !prev)}
className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
{showPassword ? "Hide" : "Show"}
</p>
</div>
</div>
<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" />
<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
<Button className="mt-8 w-full" color="green" disabled={isLoading}>
{!isLoading && "Login"}
{isLoading && (

71
src/pages/register.tsx
View File

@@ -6,6 +6,7 @@ import useUser from "@/hooks/useUser";
import Button from "@/components/Low/Button";
import {BsArrowRepeat} from "react-icons/bs";
import Link from "next/link";
import Input from "@/components/Low/Input";
export default function Register() {
const [name, setName] = useState("");
@@ -38,66 +39,16 @@ export default function Register() {
<section className="h-full w-full flex flex-col items-center justify-center gap-12">
<h1 className="font-bold text-4xl">Create new account</h1>
<form className="flex flex-col items-center gap-6 w-1/2">
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Name *</label>
<input
required
type="text"
name="name"
onChange={(e) => setName(e.target.value)}
placeholder="Enter your name"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Email address *</label>
<input
required
type="email"
name="email"
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email address"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
</div>
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Password</label>
<div className="w-full h-fit relative">
<input
required
type={showPassword ? "text" : "password"}
name="password"
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
<p
role="button"
onClick={() => setShowPassword((prev) => !prev)}
className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
{showPassword ? "Hide" : "Show"}
</p>
</div>
</div>
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Confirm Password *</label>
<div className="w-full h-fit relative">
<input
required
type={showConfirmPassword ? "text" : "password"}
name="confirmPassword"
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="Confirm your password"
className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
<p
role="button"
onClick={() => setShowConfirmPassword((prev) => !prev)}
className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
{showConfirmPassword ? "Hide" : "Show"}
</p>
</div>
</div>
<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" required />
<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" required />
<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Enter your password" required />
<Input
type="password"
name="confirmPassword"
onChange={(e) => setConfirmPassword(e)}
placeholder="Confirm your password"
required
/>
<Button className="mt-8 w-full" color="green" disabled={isLoading}>
{!isLoading && "Create account"}
{isLoading && (