sarlink-portal/components/welcome-banner.tsx

"use client";

import { useEffect, useState } from "react";

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

const ANIMATION_DURATION_MS = 500;
export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
  const [isMounted, setIsMounted] = useState(true);
  const [isFadingOut, setIsFadingOut] = useState(false);

  useEffect(() => {
    const startFadeOutTimer = setTimeout(() => {
      setIsFadingOut(true);
    }, 3000);
    const unmountTimer = setTimeout(() => {
      setIsMounted(false);
    }, 3000 + ANIMATION_DURATION_MS);

    return () => {
      clearTimeout(startFadeOutTimer);
      clearTimeout(unmountTimer);
    };
  }, []);

  if (!isMounted) {
    return null;
  }

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