sarlink-portal/components/welcome-banner.tsx

"use client";

import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useState } from "react";

interface WelcomeBannerProps {
  firstName?: string | null;
  lastName?: string | null;
}

export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsVisible(false);
    }, 4000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          className="text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          Welcome,{" "}
          <p className="font-semibold motion-preset-fade inline-block motion-delay-200">
            {firstName} {lastName}
          </p>
        </motion.div>
      )}
    </AnimatePresence>
  );
}