Alert 3

1"use client";
2 
3import { CheckCircle2 } from "lucide-react";
4import { motion } from "framer-motion";
5 
6export default function Alert03() {
7  return (
8    <motion.div
9      initial={{ opacity: 0, y: -8 }}
10      animate={{ opacity: 1, y: 0 }}
11      className="w-full max-w-sm mx-auto"
12    >
13      <div className="relative overflow-hidden rounded-lg border border-emerald-200/30 bg-emerald-50/50 dark:bg-emerald-950/20 dark:border-emerald-800/30 p-4 shadow-xs">
14        <div className="flex items-center gap-3">
15          <motion.div
16            initial={{ scale: 0.5 }}
17            animate={{ scale: 1 }}
18            transition={{
19              type: "spring",
20              stiffness: 300,
21              damping: 20,
22            }}
23          >
24            <div className="rounded-full bg-emerald-100 dark:bg-emerald-900/50 p-1">
25              <CheckCircle2 className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
26            </div>
27          </motion.div>
28          <motion.p
29            initial={{ opacity: 0, x: 10 }}
30            animate={{ opacity: 1, x: 0 }}
31            transition={{ delay: 0.1 }}
32            className="text-sm font-medium text-emerald-800 dark:text-emerald-200"
33          >
34            Saved to database
35          </motion.p>
36        </div>
37 
38        <motion.div
39          initial={{ x: "-100%" }}
40          animate={{ x: "100%" }}
41          transition={{ duration: 1, delay: 0.2 }}
42          className="absolute inset-0 z-10 pointer-events-none bg-linear-to-r from-transparent via-white/20 to-transparent"
43        />
44      </div>
45    </motion.div>
46  );
47}