1 files changed, 22 insertions(+), 3 deletions(-)

M packages/moves/src/moves.tsx

@@ 49,6 49,25 @@ const moveCategories = A.uniq(S.Eq)(
   moves.Moves.map((mv) => mv.Category)
 ) as Array<string>;
 
+const MoveChip = ({
+  category,
+  selectedCategories,
+  onClick,
+}: {
+  category: string;
+  onClick: () => void;
+  selectedCategories: Array<string>;
+}) => (
+  <Chip
+    key={category}
+    label={category}
+    color={selectedCategories.includes(category) ? "primary" : "default"}
+    onClick={() => {
+      onClick();
+    }}
+  />
+);
+
 export default function Moves() {
   const [selectedCategories, setSelectedCategories] = React.useState(
     [] as Array<string>


@@ 63,10 82,9 @@ export default function Moves() {
           sx={{ overflowX: "scroll", p: 1, pb: 2 }}
         >
           {moveCategories.map((x) => (
-            <Chip
+            <MoveChip
               key={x}
-              label={x}
-              color={selectedCategories.includes(x) ? "primary" : "default"}
+              category={x}
               onClick={() => {
                 setSelectedCategories((cats) => {
                   return cats.includes(x)


@@ 74,6 92,7 @@ export default function Moves() {
                     : cats.concat(x);
                 });
               }}
+              selectedCategories={selectedCategories}
             />
           ))}
         </Stack>