Choices

import { useState } from 'react'
import { Choices } from 'regen-ui'

const amounts = [
  { label: '$20', value: '20' },
  { label: '$50', value: '50' },
  { label: '$100', value: '100' },
  { label: 'Other', value: 'other' },
] as const

export function DepositAmount() {
  const [amount, setAmount] = useState<(typeof amounts)[number]['value']>('50')

  return (
    <Choices
      items={amounts}
      label="Deposit amount"
      onChange={setAmount}
      value={amount}
    />
  )
}

import { useState } from 'react'
import { Choices, Input } from 'regen-ui'

const units = [
  { label: 'Hours', value: 'hours' },
  { label: 'Days', value: 'days' },
] as const

export function ExpiryUnit() {
  const [unit, setUnit] = useState<(typeof units)[number]['value']>('days')

  return (
    <Input
      label="Expires after"
      placeholder="30…"
      suffix={
        <Choices
          items={units}
          label="Expiry unit"
          onChange={setUnit}
          value={unit}
          variant="compact"
        />
      }
    />
  )
}