feat: modularize game filtering logic and UI into a custom hook and dedicated components.feat: modularize game filtering logic and UI into a custom hook and dedicated components.

2025-12-19 14:06:31 +01:00
parent d916014872
commit 5b397e2265
5 changed files with 267 additions and 205 deletions
@@ -0,0 +1,55 @@
+import { Person } from "../../items";
+
+interface PersonSelectorProps {
+  people: Person[];
+  selectedPeople: Set<string>;
+  onTogglePerson: (name: string) => void;
+}
+
+export function PersonSelector({
+  people,
+  selectedPeople,
+  onTogglePerson,
+}: PersonSelectorProps) {
+  return (
+    <div style={{ marginBottom: "3rem" }}>
+      <h3>Select People</h3>
+      <div
+        className="grid-container"
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "1rem",
+          justifyContent: "center",
+        }}
+      >
+        {people.map((person) => (
+          <div
+            key={person.name}
+            className="list-item gamefilter-entry"
+            style={{
+              borderColor: selectedPeople.has(person.name)
+                ? "var(--accent-color)"
+                : "var(--border-color)",
+              cursor: "pointer",
+            }}
+            onClick={() => onTogglePerson(person.name)}
+          >
+            <div style={{ gap: "0.5rem" }}>
+              <strong>{person.name}</strong>
+            </div>
+            <div
+              style={{
+                fontSize: "0.9em",
+                color: "var(--text-muted)",
+                marginTop: "0.5rem",
+              }}
+            >
+              {person.opinion.length} opinion(s)
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}