Confetti

"use client"
import { useState } from "react";
import { Confetti } from "@/ui/confetti";
import { Button } from "@/ui/button";

const colors = [
  "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate",
  "coral", "cornflowerblue", "cornsilk", "crimson", "currentColor", "currentcolor", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen",
  "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray",
  "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia",
  "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "grey", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender"
];

export function ConfettiDemo() {
  const [start, setStart] = useState(false);

  const confetti = start ? <Confetti className="absolute" colors={colors} /> : null;

  return (
    <>
      <Button
        disabled={start}
        onClick={() => {
          if (!start) setStart(true);
          setTimeout(() => setStart(false), 5100);
        }}
      >
        Confetti
      </Button>

      {confetti}
    </>
  );
}