AddNewRelaySet.tsx raw

   1  import { Button } from '@/components/ui/button'
   2  import { Input } from '@/components/ui/input'
   3  import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider'
   4  import { useState } from 'react'
   5  import { useTranslation } from 'react-i18next'
   6  
   7  export default function AddNewRelaySet() {
   8    const { t } = useTranslation()
   9    const { createRelaySet } = useFavoriteRelays()
  10    const [newRelaySetName, setNewRelaySetName] = useState('')
  11  
  12    const saveRelaySet = () => {
  13      if (!newRelaySetName) return
  14      createRelaySet(newRelaySetName)
  15      setNewRelaySetName('')
  16    }
  17  
  18    const handleNewRelaySetNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  19      setNewRelaySetName(e.target.value)
  20    }
  21  
  22    const handleNewRelaySetNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
  23      if (event.key === 'Enter') {
  24        event.preventDefault()
  25        saveRelaySet()
  26      }
  27    }
  28  
  29    return (
  30      <div className="space-y-1">
  31        <div className="flex gap-2 items-center">
  32          <Input
  33            placeholder={t('Add a new relay set')}
  34            value={newRelaySetName}
  35            onChange={handleNewRelaySetNameChange}
  36            onKeyDown={handleNewRelaySetNameKeyDown}
  37          />
  38          <Button onClick={saveRelaySet}>{t('Add')}</Button>
  39        </div>
  40      </div>
  41    )
  42  }
  43