Alert demo

1"use client";
2 
3import { Alert } from "@/components/ui/alert";
4import { cn } from "@/lib/utils";
5import { motion } from "framer-motion";
6import { PartyPopper } from "lucide-react";
7 
8interface Alert04Props {
9  className?: string;
10}
11 
12export default function Alertdemo({ className }: Alert04Props) {
13  return (
14    <motion.div
15      initial={{ opacity: 0, y: -8 }}
16      animate={{ opacity: 1, y: 0 }}
17      className={cn("w-full max-w-xl mx-auto", className)}
18    >
19      <Alert
20        className={cn(
21          "relative overflow-hidden",
22          "bg-linear-to-b from-violet-50 to-white",
23          "dark:from-violet-950/20 dark:to-zinc-950",
24          "border border-violet-100 dark:border-violet-900/50",
25          "shadow-[0_1px_6px_0_rgba(139,92,246,0.06)]",
26          "rounded-xl p-4",
27          className,
28        )}
29      >
30        <div className="flex items-center gap-4">
31          <motion.div
32            initial={{ rotate: -15, scale: 0.5 }}
33            animate={{ rotate: 0, scale: 1 }}
34            transition={{
35              type: "spring",
36              stiffness: 300,
37              damping: 20,
38            }}
39          >
40            <div
41              className={cn(
42                "p-2.5 rounded-xl",
43                "bg-linear-to-br from-fuchsia-500 via-violet-500 to-indigo-500",
44                "dark:from-fuchsia-600 dark:via-violet-600 dark:to-indigo-600",
45              )}
46            >
47              <PartyPopper className="h-5 w-5 text-white" />
48            </div>
49          </motion.div>
50 
51          <div className="space-y-1">
52            <motion.h3
53              initial={{ opacity: 0, x: 20 }}
54              animate={{ opacity: 1, x: 0 }}
55              transition={{ delay: 0.1 }}
56              className={cn(
57                "font-medium",
58                "text-violet-900 dark:text-violet-100",
59              )}
60            >
61              Amazing milestone! 🎉
62            </motion.h3>
63            <motion.p
64              initial={{ opacity: 0, x: 20 }}
65              animate={{ opacity: 1, x: 0 }}
66              transition={{ delay: 0.2 }}
67              className={cn("text-sm", "text-violet-600 dark:text-violet-300")}
68            >
69              You&apos;ve just hit 1,000 followers on your journey!
70            </motion.p>
71          </div>
72        </div>
73 
74        {/* Confetti effect */}
75        <div className="absolute inset-0 pointer-events-none">
76// … truncated