mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-01 15:23:58 +00:00
feat: update authentication layout and forms for improved user experience; add new dependencies and enhance styling
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 5m39s
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 5m39s
This commit is contained in:
@ -1,39 +1,16 @@
|
||||
"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"
|
||||
}`}
|
||||
className={"text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400"}
|
||||
>
|
||||
Welcome,{" "}
|
||||
<span className="font-semibold">
|
||||
|
Reference in New Issue
Block a user