new tools modules & sass opti

website/src/features/toolboxes/modules/CountersModule.jsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { Icon } from "../../../components/Icon.jsx";
+
+export function CountersModule({ toolboxId, moduleId, context, editing }) {
+  const data = context.normalizeCountersData(context.getModuleData(toolboxId, moduleId, { counters: [] }));
+  const [label, setLabel] = useState("");
+
+  function save(counters) {
+    context.setModuleData(toolboxId, moduleId, { counters });
+  }
+
+  function addCounter(event) {
+    event.preventDefault();
+    const cleanLabel = label.trim();
+    if (!cleanLabel) return;
+
+    save([...data.counters, { id: context.uid("counter"), label: cleanLabel, value: 0 }]);
+    setLabel("");
+  }
+
+  function updateCounter(counterId, updater) {
+    save(data.counters.map((counter) => counter.id === counterId ? updater(counter) : counter));
+  }
+
+  return (
+    <>
+      {editing && (
+        <form className="inline-form counters-add-form module-add-panel" onSubmit={addCounter}>
+          <input name="label" placeholder="Nom du compteur" value={label} onChange={(event) => setLabel(event.target.value)} />
+          <button className="primary">Ajouter</button>
+        </form>
+      )}
+      <div className="counters-grid">
+        {data.counters.map((counter) => (
+          <article className="counter-item" key={counter.id}>
+            <div>
+              <strong>{counter.value}</strong>
+              <span>{counter.label}</span>
+            </div>
+            <div className="counter-actions">
+              <button type="button" onClick={() => updateCounter(counter.id, (item) => ({ ...item, value: item.value - 1 }))} aria-label={`Décrémenter ${counter.label}`}>-</button>
+              <button type="button" onClick={() => updateCounter(counter.id, (item) => ({ ...item, value: item.value + 1 }))} aria-label={`Incrémenter ${counter.label}`}>+</button>
+              <button type="button" onClick={() => updateCounter(counter.id, (item) => ({ ...item, value: 0 }))} aria-label={`Réinitialiser ${counter.label}`} title="Réinitialiser">
+                <Icon name="rubber" />
+              </button>
+              <button type="button" className="danger" onClick={() => save(data.counters.filter((item) => item.id !== counter.id))} aria-label={`Supprimer ${counter.label}`} title="Supprimer">
+                <Icon name="trash" />
+              </button>
+            </div>
+          </article>
+        ))}
+      </div>
+    </>
+  );
+}