refactor: Création de composants et uniformisation des modales (#2)

This commit is contained in:
N3WT DE COMPET
2024-11-24 18:42:42 +01:00
parent 5946cbdee6
commit d51778ba54
18 changed files with 362 additions and 299 deletions

View File

@ -1,18 +1,23 @@
export default function SelectChoice({type, name, label, choices, callback, selected, error }) {
export default function SelectChoice({type, name, label, choices, callback, selected, error, IconItem }) {
return (
<>
<div className="mb-4">
<label htmlFor={name} className="block text-sm font-medium text-gray-700">{label}</label>
<select
className={`mt-1 block w-full px-3 py-2 text-base border ${error ? 'border-red-500' : 'border-gray-300'} focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md`}
type={type}
id={name}
name={name}
value={selected}
onChange={callback}
>
{choices.map(({ value, label }, index) => <option key={value} value={value}>{label}</option>)}
</select>
<div className={`flex items-center border-2 border-gray-200 rounded-md hover:border-gray-400 focus-within:border-gray-500 h-8`}>
<span className="inline-flex items-center px-3 rounded-l-md bg-gray-50 text-gray-500 text-sm h-full">
{IconItem && <IconItem />}
</span>
<select
className="mt-1 block w-full px-2 py-0 text-base rounded-r-md sm:text-sm border-none focus:ring-0 outline-none"
type={type}
id={name}
name={name}
value={selected}
onChange={callback}
>
{choices.map(({ value, label }, index) => <option key={value} value={value}>{label}</option>)}
</select>
</div>
{error && <p className="mt-2 text-sm text-red-600">{error}</p>}
</div>
</>