Party Popper

"use client";

import { PartyPopper } from "@/components/ui/party-popper";
import { Button } from "@/components/ui/button";

const settings = {
  particleCount: 12,
  streamerCount: 4,
  particleSizeMin: 8,
  particleSizeMax: 12,
  streamerWidthMax: 35,
  streamerHeightMax: 6,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="flex h-screen w-screen items-center justify-center">
      <PartyPopper
        particleCount={s.particleCount}
        streamerCount={s.streamerCount}
        particleSizeMin={s.particleSizeMin}
        particleSizeMax={s.particleSizeMax}
        streamerWidthMax={s.streamerWidthMax}
        streamerHeightMax={s.streamerHeightMax}
      >
        <Button asChild>
          <span>🎉 Celebrate</span>
        </Button>
      </PartyPopper>
    </div>
  );
}