NewMailboxRelayInput.tsx raw

   1  import { Button } from '@/components/ui/button'
   2  import { Input } from '@/components/ui/input'
   3  import { useState } from 'react'
   4  import { useTranslation } from 'react-i18next'
   5  
   6  export default function NewMailboxRelayInput({
   7    saveNewMailboxRelay
   8  }: {
   9    saveNewMailboxRelay: (url: string) => string | null
  10  }) {
  11    const { t } = useTranslation()
  12    const [newRelayUrl, setNewRelayUrl] = useState('')
  13    const [newRelayUrlError, setNewRelayUrlError] = useState<string | null>(null)
  14  
  15    const save = () => {
  16      const error = saveNewMailboxRelay(newRelayUrl)
  17      if (error) {
  18        setNewRelayUrlError(error)
  19      } else {
  20        setNewRelayUrl('')
  21      }
  22    }
  23  
  24    const handleRelayUrlInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
  25      if (event.key === 'Enter') {
  26        event.preventDefault()
  27        save()
  28      }
  29    }
  30  
  31    const handleRelayUrlInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  32      setNewRelayUrl(e.target.value)
  33      setNewRelayUrlError(null)
  34    }
  35  
  36    return (
  37      <div>
  38        <div className="flex gap-4">
  39          <Input
  40            className={newRelayUrlError ? 'border-destructive' : ''}
  41            placeholder={t('Add a new relay')}
  42            value={newRelayUrl}
  43            onKeyDown={handleRelayUrlInputKeyDown}
  44            onChange={handleRelayUrlInputChange}
  45            onBlur={save}
  46          />
  47          <Button onClick={save}>{t('Add')}</Button>
  48        </div>
  49        {newRelayUrlError && <div className="text-destructive text-xs mt-1">{newRelayUrlError}</div>}
  50      </div>
  51    )
  52  }
  53