diff --git a/components/FormAmount/Inputs/InputAmount.module.css b/components/FormAmount/Inputs/InputAmount.module.css index 5b68656..0da69f2 100644 --- a/components/FormAmount/Inputs/InputAmount.module.css +++ b/components/FormAmount/Inputs/InputAmount.module.css @@ -1,7 +1,6 @@ .input { all: unset; - width: 60px; - padding: 0 0.2rem; + padding: 0 0.75rem; text-align: center; border-right: 1px solid rgba(var(--foreground-rgb), 0.15); } diff --git a/components/FormAmount/Inputs/InputAmount.tsx b/components/FormAmount/Inputs/InputAmount.tsx index 84ec9f1..838afdc 100644 --- a/components/FormAmount/Inputs/InputAmount.tsx +++ b/components/FormAmount/Inputs/InputAmount.tsx @@ -1,4 +1,6 @@ -import { Dispatch, SetStateAction } from 'react' +'use client' + +import { Dispatch, SetStateAction, useRef, useState } from 'react' import styles from './InputAmount.module.css' export function InputAmount({ @@ -8,6 +10,16 @@ export function InputAmount({ amount: number setAmount: Dispatch> }) { + function handleChange(e: React.ChangeEvent) { + const { value } = e.target + + if (value === '') { + setAmount(0) + } else { + setAmount(Number(value)) + } + } + return ( setAmount(Number(e.target.value))} + onChange={handleChange} + style={{ + width: Math.min(Math.max(amount.toString().length, 2), 50) + 'ch' + }} /> ) } diff --git a/components/FormAmount/Inputs/InputToken.module.css b/components/FormAmount/Inputs/InputToken.module.css index 74cda6e..0a6fd7d 100644 --- a/components/FormAmount/Inputs/InputToken.module.css +++ b/components/FormAmount/Inputs/InputToken.module.css @@ -1,7 +1,7 @@ .select { display: inline-block; all: unset; - padding: 0 0.5rem; + padding: 0 0.75rem; } .select:hover:not(.select[disabled]) {