Alert 4

1"use client";
2 
3import { Alert } from "@/components/ui/alert";
4import { cn } from "@/lib/utils";
5import { motion } from "framer-motion";
6import { CircleDollarSign } from "lucide-react";
7 
8export default function Alert04() {
9  return (
10    <motion.div
11      initial={{ opacity: 0, y: -8 }}
12      animate={{ opacity: 1, y: 0 }}
13      className="w-full max-w-md mx-auto"
14    >
15      <Alert
16        className={cn(
17          "relative overflow-hidden",
18          "bg-white dark:bg-zinc-900",
19          "border border-emerald-100 dark:border-emerald-900/50",
20          "shadow-xs",
21          "p-4 rounded-xl",
22        )}
23      >
24        <div className="flex items-center gap-4">
25          <motion.div
26            initial={{ scale: 0.5 }}
27            animate={{ scale: 1 }}
28            className="shrink-0"
29          >
30            <div
31              className={cn(
32                "w-10 h-10 rounded-full",
33                "bg-emerald-50 dark:bg-emerald-950/50",
34                "flex items-center justify-center",
35                "ring-8 ring-emerald-50/50 dark:ring-emerald-950/25",
36              )}
37            >
38              <CircleDollarSign className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
39            </div>
40          </motion.div>
41 
42          <div className="flex-1 min-w-0">
43            <motion.div
44              initial={{ opacity: 0, x: 10 }}
45              animate={{ opacity: 1, x: 0 }}
46              className="space-y-1"
47            >
48              <div className="flex items-center gap-2">
49                <h3 className="text-base font-medium text-emerald-900 dark:text-emerald-100">
50                  You got paid!
51                </h3>
52                <span className="px-1.5 py-0.5 rounded-md text-xs font-medium bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-300">
53                  $2,400.00
54                </span>
55              </div>
56              <p className="text-sm text-emerald-600 dark:text-emerald-400">
57                The payment has been processed and added to your account
58              </p>
59            </motion.div>
60          </div>
61        </div>
62 
63        <div className="absolute inset-0 pointer-events-none">
64          <div className="absolute -left-2 -top-2 w-24 h-24 rounded-full bg-emerald-100 dark:bg-emerald-900/25 blur-2xl opacity-50" />
65          <div className="absolute -right-2 -bottom-2 w-24 h-24 rounded-full bg-emerald-100 dark:bg-emerald-900/25 blur-2xl opacity-50" />
66        </div>
67      </Alert>
68    </motion.div>
69// … truncated