1import React, { useState, useEffect, ReactNode } from "react";
2import { cn } from "@/utils/cn";
3import { motion } from "framer-motion";
4
5interface AlertProps {
6  onClose?: () => void;
7  dismissAfter?: number;
8  children?: ReactNode;
9  className?: string;
10}
11
12const Alert: React.FC<AlertProps> = ({
13  children,
14  className,
15  onClose,
16  dismissAfter = 1000,
17  ...props
18}) => {
19  const [isVisible, setIsVisible] = useState(false);
20
21  const handleClose = () => {
22    setIsVisible(false);
23    if (onClose) onClose();
24  };
25
26  useEffect(() => {
27    setIsVisible(true);
28
29    const timer = setTimeout(() => {
30      setIsVisible(false);
31      if (onClose) onClose();
32    }, dismissAfter);
33
34    return () => clearTimeout(timer);
35  }, [dismissAfter, onClose]);
36
37  return (
38    <motion.div
39      initial={{ opacity: 0, y: -10 }}
40      animate={{ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : -10 }}
41      exit={{ opacity: 0, y: -10 }}
42      transition={{ duration: 0.3 }}
43      className={cn(
44        "flex min-w-80 items-center rounded-lg border border-rose-50 bg-zinc-950 p-5",
45        className,
46      )}
47      {...props}
48    >
49      <div className="flex flex-col space-y-2">{children}</div>
50      <button
51        onClick={handleClose}
52        className="ml-auto text-3xl leading-none text-rose-50"
53      >
54        ×
55      </button>
56    </motion.div>
57  );
58};
59
60export default Alert;
61

1import React from "react";
2import { cn } from "@/utils/cn";
3
4interface AlertDescriptionProps
5  extends React.HTMLAttributes<HTMLParagraphElement> {}
6
7const AlertDescription: React.FC<AlertDescriptionProps> = ({
8  children,
9  className,
10  ...props
11}) => {
12  return (
13    <p className={cn("font-geist text-rose-50", className)} {...props}>
14      {children}
15    </p>
16  );
17};
18
19export default AlertDescription;
20

1import React from "react";
2import { cn } from "@/utils/cn";
3
4interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
5
6const AlertTitle: React.FC<AlertTitleProps> = ({
7  children,
8  className,
9  ...props
10}) => {
11  return (
12    <h2
13      className={cn("font-geist font-extrabold text-rose-50", className)}
14      {...props}
15    >
16      {children}
17    </h2>
18  );
19};
20
21export default AlertTitle;
22