4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Number picker done

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-19 15:51:39 +02:00
parent ada4dadc09
commit 0fb3069d8f
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/front/Components/Elements/NumberPicker/classes.module.scss
View File

@ -4,16 +4,20 @@
align-items: center; align-items: center;
width: fit-content; width: fit-content;
border: 1px solid #e7e7e7; border: 1px solid #e7e7e7;
padding: 24px; padding: var(--spacing-1-5, 12px) var(--spacing-md, 16px);
gap: var(--spacing-2, 16px);
.button { .button {
border: none; border: none;
background: none; background: none;
padding: 0;
height: 24px;
width: 24px;
cursor: pointer; cursor: pointer;
} }
.input { .input {
width: 50px; width: 40px;
height: 40px;
text-align: center; text-align: center;
border: none; border: none;
} }

4
src/front/Components/Elements/NumberPicker/index.tsx
View File

@ -35,11 +35,11 @@ export default function NumberPicker(props: IProps) {
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<button onClick={handleMinus} disabled={min && value <= min ? true : false} className={classes["button"]}> <button onClick={handleMinus} disabled={min && value <= min ? true : false} className={classes["button"]}>
<MinusIcon width="20" height="20" /> <MinusIcon width="24" height="24" />
</button> </button>
<input type="number" value={value} onChange={handleChange} disabled={disabled} className={classes["input"]} /> <input type="number" value={value} onChange={handleChange} disabled={disabled} className={classes["input"]} />
<button onClick={handlePlus} disabled={max && value >= max ? true : false} className={classes["button"]}> <button onClick={handlePlus} disabled={max && value >= max ? true : false} className={classes["button"]}>
<PlusIcon width="20" height="20" /> <PlusIcon width="24" height="24" />
</button> </button>
</div> </div>
); );