feat: create custom checkbox component

wafash08 · Jun 9, 2024 · c8053ad · c8053ad
1 parent f597185
commit c8053ad
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 16 deletions.
diff --git a/components/custom-checkbox.jsx b/components/custom-checkbox.jsx
@@ -0,0 +1,14 @@
+export default function CustomCheckbox({ agree, onAgree }) {
+	return (
+		<label className='custom-checkbox'>
+			<input
+				type='checkbox'
+				name='terms_and_conditions'
+				className='checkbox'
+				onChange={onAgree}
+				value={agree}
+			/>
+			I agree to terms & conditions
+		</label>
+	);
+}
diff --git a/pages/login.js b/pages/login.js
@@ -3,8 +3,10 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import clsx from 'clsx';
 import Input from '@/components/input';
+import CustomCheckbox from '@/components/custom-checkbox';
 
 export default function Login() {
+	const [agree, setAgree] = useState(false);
 	const [error, setError] = useState(null);
 	const router = useRouter();
 
@@ -76,20 +78,7 @@ export default function Login() {
 								placeholder='Password'
 								required
 							/>
-							{/* <div className='flex items-center gap-4'>
-								<input
-									type='checkbox'
-									name='term_and_condition'
-									id='term_and_condition'
-									className='cursor-pointer appearance-none bg-white m-0 rounded-sm'
-								/>
-								<label
-									htmlFor='term_and_condition'
-									className='text-[#696F79] cursor-pointer'
-								>
-									I agree to terms & conditions
-								</label>
-							</div> */}
+							<CustomCheckbox agree={agree} onAgree={() => setAgree(!agree)} />
 						</div>
 
 						{error && (
@@ -102,8 +91,10 @@ export default function Login() {
 							<button
 								type='submit'
 								className={clsx(
-									'inline-flex items-center justify-center px-5 py-5 bg-[#EFC81A] rounded-md text-white w-full'
+									'inline-flex items-center justify-center px-5 py-5 bg-[#EFC81A] rounded-md text-white w-full',
+									'disabled:cursor-not-allowed disabled:bg-zinc-200'
 								)}
+								disabled={!agree}
 							>
 								Login
 							</button>

diff --git a/pages/register.js b/pages/register.js
@@ -4,8 +4,10 @@ import { useRouter } from 'next/router';
 import clsx from 'clsx';
 import Input from '@/components/input';
 import { register } from '@/lib/auth';
+import CustomCheckbox from '@/components/custom-checkbox';
 
 export default function Register() {
+	const [agree, setAgree] = useState(false);
 	const [error, setError] = useState(null);
 	const router = useRouter();
 
@@ -87,6 +89,7 @@ export default function Register() {
 								placeholder='Password'
 								required
 							/>
+							<CustomCheckbox agree={agree} onAgree={() => setAgree(!agree)} />
 						</div>
 
 						{error && (
@@ -99,8 +102,10 @@ export default function Register() {
 							<button
 								type='submit'
 								className={clsx(
-									'inline-flex items-center justify-center px-5 py-5 bg-[#EFC81A] rounded-md text-white w-full'
+									'inline-flex items-center justify-center px-5 py-5 bg-[#EFC81A] rounded-md text-white w-full',
+									'disabled:cursor-not-allowed disabled:bg-zinc-200'
 								)}
+								disabled={!agree}
 							>
 								Register Account
 							</button>

diff --git a/styles/globals.css b/styles/globals.css
@@ -9,3 +9,55 @@
 	font-display: swap;
 	src: url(/fonts/airbnb-cereal-app.woff2) format('woff2');
 }
+
+.custom-checkbox {
+	font-size: 1rem;
+	display: grid;
+	grid-template-columns: 1em auto;
+	gap: 1em;
+	color: #696f79;
+	cursor: pointer;
+}
+
+.checkbox {
+	appearance: none;
+	background-color: #fff;
+	margin: 0;
+	font: inherit;
+	color: #efc81a;
+	width: 1.15em;
+	height: 1.15em;
+	border: 0.15em solid #696f79;
+	border-radius: 0.15em;
+	transform: translateY(0.25em);
+	transition-duration: 120ms;
+	transition-timing-function: ease-in-out;
+	transition-property: background-color, border-color;
+	display: grid;
+	place-content: center;
+}
+
+.checkbox:checked {
+	background-color: #efc81a;
+	border-color: #efc81a;
+}
+
+.checkbox::before {
+	content: '';
+	width: 0.65em;
+	height: 0.65em;
+	transform: scale(0);
+	transform-origin: bottom left;
+	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+	transition: 120ms transform ease-in-out;
+	box-shadow: inset 1em 1em #fff;
+}
+
+.checkbox:checked:before {
+	transform: scale(1);
+}
+
+.checkbox:focus {
+	outline: max(2px, 0.15em) solid #efc81a;
+	outline-offset: max(2px, 0.15em);
+}