✨ Number picker working

src/front/Components/Elements/NumberPicker/classes.module.scss

@@ -1,2 +1,20 @@
 .root {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: fit-content;
+	border: 1px solid #e7e7e7;
+	padding: 24px;
+
+	.button {
+		border: none;
+		background: none;
+		cursor: pointer;
+	}
+
+	.input {
+		width: 50px;
+		text-align: center;
+		border: none;
+	}
 }

src/front/Components/Elements/NumberPicker/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import classes from "./classes.module.scss";
+import { MinusIcon, PlusIcon } from "@heroicons/react/24/outline";
 
 type IProps = {
 	defaultValue: number;
@@ -15,12 +16,10 @@ export default function NumberPicker(props: IProps) {
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		let value = parseInt(e.target.value);
-		if (min && value < min) {
-			value = min;
-		}
-		if (max && value > max) {
-			value = max;
-		}
+		if (isNaN(value)) value = 1;
+		if (min && value < min) value = min;
+		if (max && value > max) value = max;
+
 		setValue(value);
 		onChange(value);
 	};
@@ -35,12 +34,12 @@ export default function NumberPicker(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<button onClick={handleMinus} disabled={min && value <= min ? true : false}>
-				-
+			<button onClick={handleMinus} disabled={min && value <= min ? true : false} className={classes["button"]}>
+				<MinusIcon width="20" height="20" />
 			</button>
-			<input type="number" value={value} onChange={handleChange} disabled={disabled} />
-			<button onClick={handlePlus} disabled={max && value >= max ? true : false}>
-				+
+			<input type="number" value={value} onChange={handleChange} disabled={disabled} className={classes["input"]} />
+			<button onClick={handlePlus} disabled={max && value >= max ? true : false} className={classes["button"]}>
+				<PlusIcon width="20" height="20" />
 			</button>
 		</div>
 	);