44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import type { ArticleCategory } from '@/types/nostr'
|
|
|
|
interface CategorySelectProps {
|
|
id: string
|
|
label: string
|
|
value?: ArticleCategory | ''
|
|
onChange: (value: ArticleCategory | undefined) => void
|
|
required?: boolean
|
|
helpText?: string
|
|
}
|
|
|
|
export function CategorySelect({
|
|
id,
|
|
label,
|
|
value,
|
|
onChange,
|
|
required = false,
|
|
helpText,
|
|
}: CategorySelectProps) {
|
|
return (
|
|
<div>
|
|
<label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1">
|
|
{label} {required && '*'}
|
|
</label>
|
|
<select
|
|
id={id}
|
|
value={value ?? ''}
|
|
onChange={(e) => {
|
|
const next = e.target.value === '' ? undefined : (e.target.value as ArticleCategory)
|
|
onChange(next)
|
|
}}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
required={required}
|
|
>
|
|
<option value="">Sélectionnez une catégorie</option>
|
|
<option value="science-fiction">Science-fiction</option>
|
|
<option value="scientific-research">Recherche scientifique</option>
|
|
</select>
|
|
{helpText && <p className="text-xs text-gray-500 mt-1">{helpText}</p>}
|
|
</div>
|
|
)
|
|
}
|