sarlink-portal/components/welcome-banner.tsx

"use client";

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);
    }, 3000);

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

  if (!isVisible) {
    return null;
  }

  return (
    <div className="text-sm font-mono px-2 p-1 fade-out-10 bg-green-500/10 text-green-900 dark:text-green-400">
      Welcome,{" "}
      <span className="font-semibold">
        {firstName} {lastName}
      </span>
    </div>
  );
}