acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 07:53:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Création de nouveaux composants / update formulaire de

Browse Source 
création de classe (#2)
This commit is contained in:
N3WT DE COMPET
2024-12-14 15:28:07 +01:00
parent cf144310a1
commit 7acae479da
43 changed files with 2374 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
Front-End/src/components/RadioList.js
View File

@ -1,39 +1,33 @@
import React from 'react';
const RadioList = ({ items, formData, handleChange, fieldName, label, icon: Icon, className, itemLabelFunc}) => {
return (
<div className={`mb-4 ${className}`}>
<label className="block text-sm font-medium text-gray-700 flex items-center">
{Icon && <Icon className="w-5 h-5 mr-2" />}
{label}
const RadioList = ({ items, formData, handleChange, fieldName, icon: Icon, className }) => {
return (
<div className={`mb-4 ${className}`}>
<div className="grid grid-cols-1 gap-4">
{items.map(item => (
<div key={item.id} className="flex items-center">
<input
key={`${item.id}-${Math.random()}`}
type="radio"
id={`${fieldName}-${item.id}`}
name={fieldName}
value={item.id}
checked={parseInt(formData[fieldName], 10) === item.id}
onChange={handleChange}
className="form-radio h-4 w-4 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 cursor-pointer"
style={{ outline: 'none', boxShadow: 'none' }}
/>
<label
htmlFor={`${fieldName}-${item.id}`}
className="ml-2 block text-sm text-gray-900 flex items-center cursor-pointer"
>
{item.label}
</label>
<div className="mt-2 grid grid-cols-1 gap-4">
{items.map(item => (
<div key={item.id} className="flex items-center">
<input
type="radio"
id={`${fieldName}-${item.id}`}
name={fieldName}
value={item.id}
checked={formData[fieldName] === item.id}
onChange={handleChange}
className="form-radio h-4 w-4 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600"
/>
<label htmlFor={`${fieldName}-${item.id}`} className="ml-2 block text-sm text-gray-900 flex items-center">
{itemLabelFunc(item)}
{item.codeCouleur && (
<div
className="w-4 h-4 rounded-full ml-2"
style={{ backgroundColor: item.codeCouleur }}
title={item.codeCouleur}
></div>
)}
</label>
</div>
))}
</div>
</div>
);
</div>
))}
</div>
</div>
);
};
export default RadioList;