56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
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>
|
|
);
|
|
}
|