diff --git a/components/EditBox.tsx b/components/EditBox.tsx index 5444653..f762c27 100644 --- a/components/EditBox.tsx +++ b/components/EditBox.tsx @@ -8,11 +8,27 @@ export interface Props { } const ClickableContainer = styled.span` + display: inline-block; + padding: 4px 10px; + margin: 4px; + border: 1px solid #eee; + border-radius: 5px; + width: 120px; + &:hover { background-color: #eee; } `; +const EditingBox = styled.input` + display: inline-block; + padding: 4px 10px; + margin: 4px; + border: 1px solid #eee; + border-radius: 5px; + width: 120px; +`; + export default function EditBox({ valueAtom }: Props) { const [value, setValue] = useAtom(valueAtom); const [valueInput, setValueInput] = useState(""); @@ -32,6 +48,7 @@ export default function EditBox({ valueAtom }: Props) { e.preventDefault(); try { const n = parseFloat(valueInput); + if (isNaN(n) || !isFinite(n)) return; setValue(n); setEditing(false); } catch (e) { @@ -42,7 +59,7 @@ export default function EditBox({ valueAtom }: Props) { if (editing) { return (