select.tsx

import { DetailedHTMLProps, forwardRef, SelectHTMLAttributes } from 'react'

export const Select = forwardRef<
  HTMLSelectElement,
  DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>
>(({ children, ...rest }, ref) => {
  return (
    <select
      ref={ref}
      className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-dodger-blue focus:border-dodger-blue sm:text-sm"
      {...rest}
    >
      {children}
    </select>
  )
})

Select.displayName = 'Select'