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

This commit is contained in:
2025-06-09 01:12:16 +05:00
parent 8438ceb376
commit 406733b360
11 changed files with 419 additions and 414 deletions

View File

@ -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">