pdfer/components/Select.tsx

import React, { ChangeEvent } from 'react'

export default function Select({
  name,
  text,
  value,
  onchange,
  options = [],
}: {
  name: string
  text: string
  value: string
  onchange: (name: string, event: ChangeEvent<{ value: string }>) => void
  options: { name: string; value: string }[]
}) {
  return (
    <>
      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
        {text}
      </label>
      <select
        name={name}
        className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
        onChange={onchange.bind(null, name)}
        value={value}
      >
        {options.map((option) => (
          <option value={option.value} key={option.value}>
            {option.name}
          </option>
        ))}
      </select>
    </>
  )
}