Nuqs array toggle

"use client";

import { Button } from "@/components/ui/button";
import { parseAsArrayOf, parseAsInteger, useQueryState } from "nuqs";

export const Example = () => {
  const [colors, setColors] = useQueryState(
    "colors",
    parseAsArrayOf(parseAsInteger)
      .withOptions({ shallow: false })
      .withDefault([])
  );

  return (
    <div>
      <p>client: {JSON.stringify(colors)}</p>
      <div>
        <Button
          onClick={() => {
            setColors([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
          }}
        >
          Add all colors
        </Button>

        <Button onClick={() => setColors([])}>Clear colors</Button>

        <Button
          onClick={() =>
            setColors((prev) => {
              return prev.includes(1)
                ? prev.filter((color) => color !== 1)
                : [...prev, 1];
            })
          }
        >
          Toggle 1
        </Button>
        <Button
          onClick={() =>
            setColors((prev) => {
              return prev.includes(2)
                ? prev.filter((color) => color !== 2)
                : [...prev, 2];
            })
          }
        >
          Toggle 2
        </Button>
      </div>
    </div>
  );
};