DefaultZapAmountInput.tsx raw

   1  import { Input } from '@/components/ui/input'
   2  import { Label } from '@/components/ui/label'
   3  import { useZap } from '@/providers/ZapProvider'
   4  import { useState } from 'react'
   5  import { useTranslation } from 'react-i18next'
   6  
   7  export default function DefaultZapAmountInput() {
   8    const { t } = useTranslation()
   9    const { defaultZapSats, updateDefaultSats } = useZap()
  10    const [defaultZapAmountInput, setDefaultZapAmountInput] = useState(defaultZapSats)
  11  
  12    return (
  13      <div className="w-full space-y-1">
  14        <Label htmlFor="default-zap-amount-input">{t('Default zap amount')}</Label>
  15        <div className="flex w-full items-center gap-2">
  16          <Input
  17            id="default-zap-amount-input"
  18            value={defaultZapAmountInput}
  19            onChange={(e) => {
  20              setDefaultZapAmountInput((pre) => {
  21                if (e.target.value === '') {
  22                  return 0
  23                }
  24                let num = parseInt(e.target.value, 10)
  25                if (isNaN(num) || num < 0) {
  26                  num = pre
  27                }
  28                return num
  29              })
  30            }}
  31            onBlur={() => {
  32              updateDefaultSats(defaultZapAmountInput)
  33            }}
  34          />
  35        </div>
  36      </div>
  37    )
  38  }
  39