From 52e1da8bd7d45058235e2fb3afc81c541020a886 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 5 Apr 2024 09:57:54 +0200
Subject: [PATCH] :sparkles: Number picker working

---
 .../Elements/NumberPicker/classes.module.scss | 18 ++++++++++++++++
 .../Elements/NumberPicker/index.tsx           | 21 +++++++++----------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/front/Components/Elements/NumberPicker/classes.module.scss b/src/front/Components/Elements/NumberPicker/classes.module.scss
index c3a2af63..0768ef30 100644
--- a/src/front/Components/Elements/NumberPicker/classes.module.scss
+++ b/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;
+	}
 }
diff --git a/src/front/Components/Elements/NumberPicker/index.tsx b/src/front/Components/Elements/NumberPicker/index.tsx
index c141ef3d..5bb08189 100644
--- a/src/front/Components/Elements/NumberPicker/index.tsx
+++ b/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>
 	);