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-slide-down inline-block motion-delay-200">
						{firstName} {lastName}
					</p>
				</motion.div>
			)}
		</AnimatePresence>
	);
}