This commit is contained in:
Sebastien Riviere
2025-09-05 23:37:19 +02:00
parent 999c9a8b77
commit 93f9a05b1a
13 changed files with 356 additions and 400 deletions

View File

@@ -1,22 +1,15 @@
export function BlueButton({ children, ...props }) {
return (
<button {...props} className="bg-blue-600 hover:bg-blue-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
{children}
</button>
);
}
export function CustomButton({ color, children, ...props }) {
const colorClasses = {
blue: 'bg-blue-600 hover:bg-blue-500',
red: 'bg-red-600 hover:bg-red-500',
green: 'bg-green-600 hover:bg-green-500',
yellow: 'bg-yellow-600 hover:bg-yellow-500',
purple: 'bg-purple-600 hover:bg-purple-500',
gray: 'bg-gray-600 hover:bg-gray-500',
};
export function RedButton({ children, ...props }) {
return (
<button {...props} className="bg-red-600 hover:bg-red-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
{children}
</button>
);
}
export function GreenButton({ children, ...props }) {
return (
<button {...props} className="bg-green-600 hover:bg-green-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
<button {...props} className={`${colorClasses[color]} text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded`}>
{children}
</button>
);

View File

@@ -17,10 +17,10 @@ export function List({array, children}) {
}
export function ReorderList({droppableId, array, setArray, children}) {
const [arrayLocal, setArrayLocal] = useState(array);
const [localArray, setLocalArray] = useState(array);
useEffect(() => {
setArrayLocal(array);
setLocalArray(array);
}, [array])
function reorder(list, startIndex, endIndex) {
@@ -34,7 +34,7 @@ export function ReorderList({droppableId, array, setArray, children}) {
if (!result.destination) return;
if (result.destination.index === result.source.index) return;
const newArray = reorder(array, result.source.index, result.destination.index);
setArrayLocal(newArray);
setLocalArray(newArray);
setArray(newArray);
}
@@ -44,7 +44,7 @@ export function ReorderList({droppableId, array, setArray, children}) {
{provided => (
<div className='w-full h-full bg-gray-300 overflow-y-scroll' ref={provided.innerRef} {...provided.droppableProps}>
<ul className="w-full p-1 pb-0">
{arrayLocal.map((elem, i) => (
{localArray.map((elem, i) => (
<li className='w-full' key={elem.id}>
<Draggable draggableId={elem.id.toString()} index={i}>
{provided => (