Added a bunch of animations on frequently used custom components

FlorianLeChat · Dec 14, 2024 · e5d1200 · e5d1200
1 parent 0bf6e42
commit e5d1200
Show file tree

Hide file tree

Showing 10 changed files with 330 additions and 113 deletions.
diff --git a/app/[locale]/authentication/page.tsx b/app/[locale]/authentication/page.tsx
@@ -20,9 +20,14 @@ import { Tabs,
 	TabsTrigger } from "../components/ui/tabs";
 import { Separator } from "../components/ui/separator";
 
+const BlurIn = lazy( () => import( "../components/ui/thirdparty/blur-in" ) );
+const FadeText = lazy( () => import( "../components/ui/thirdparty/fade-text" ) );
 const OAuthForm = lazy( () => import( "./components/oauth" ) );
 const SignUpForm = lazy( () => import( "./components/signup" ) );
 const SignInForm = lazy( () => import( "./components/signin" ) );
+const WordPullUp = lazy(
+	() => import( "../components/ui/thirdparty/word-pull-up" )
+);
 
 // Déclaration des propriétés de la page.
 export async function generateMetadata(): Promise<Metadata>
@@ -38,9 +43,9 @@ export async function generateMetadata(): Promise<Metadata>
 // Affichage de la page.
 export default async function Page( {
 	params
-}: {
+}: Readonly<{
 	params: Promise<{ locale: string }>;
-} )
+}> )
 {
 	// Définition de la langue de la page.
 	const { locale } = await params;
@@ -87,27 +92,39 @@ export default async function Page( {
 				{/* Formulaire d'inscription */}
 				<TabsContent value="signUp" className="space-y-6">
 					{/* Titre et description du formulaire */}
-					<h2 className="text-xl font-semibold tracking-tight">
-						{messages( "authentication.register_title" )}
-					</h2>
-
-					<p className="text-sm text-muted-foreground">
+					<WordPullUp
+						as="h2"
+						words={messages( "authentication.register_title" )}
+						className="text-xl font-semibold tracking-tight"
+					/>
+
+					<FadeText
+						as="p"
+						className="text-sm text-muted-foreground"
+						direction="up"
+					>
 						{messages( "authentication.register_description" )}
-					</p>
+					</FadeText>
 
 					<SignUpForm />
 				</TabsContent>
 
 				{/* Formulaire de connexion */}
 				<TabsContent value="signIn" className="space-y-6">
 					{/* Titre et description du formulaire */}
-					<h2 className="text-xl font-semibold tracking-tight">
-						{messages( "authentication.login_title" )}
-					</h2>
-
-					<p className="text-sm text-muted-foreground">
+					<WordPullUp
+						as="h2"
+						words={messages( "authentication.login_title" )}
+						className="text-xl font-semibold tracking-tight"
+					/>
+
+					<FadeText
+						as="p"
+						className="text-sm text-muted-foreground"
+						direction="up"
+					>
 						{messages( "authentication.login_description" )}
-					</p>
+					</FadeText>
 
 					<SignInForm />
 				</TabsContent>
@@ -127,7 +144,7 @@ export default async function Page( {
 				<OAuthForm />
 
 				{/* Conditions d'utilisation et politique de confidentialité */}
-				<p className="px-8 text-center text-sm text-muted-foreground">
+				<BlurIn as="p" className="px-8 text-center text-sm text-muted-foreground">
 					{messages.rich( "authentication.accept_terms", {
 						a1: ( chunks ) => (
 							<Link
@@ -148,7 +165,7 @@ export default async function Page( {
 							</Link>
 						)
 					} )}
-				</p>
+				</BlurIn>
 			</Tabs>
 		</>
 	);

diff --git a/app/[locale]/components/header.tsx b/app/[locale]/components/header.tsx
@@ -12,13 +12,13 @@ import { showPreferences } from "vanilla-cookieconsent";
 import { LogIn, Cookie, LayoutDashboard } from "lucide-react";
 import { Button, buttonVariants } from "./ui/button";
 
-export default function Footer( {
+export default function Header( {
 	meta,
 	session
-}: {
+}: Readonly<{
 	meta: Metadata & { source: string };
 	session: Session | null;
-} )
+}> )
 {
 	// Déclaration des variables d'état.
 	const headerMessages = useTranslations( "header" );

diff --git a/app/[locale]/components/navigation.tsx b/app/[locale]/components/navigation.tsx
@@ -13,6 +13,8 @@ import { Settings, LayoutDashboard } from "lucide-react";
 
 import GitHubDark from "@/public/assets/images/github-dark.png";
 import GitHubLight from "@/public/assets/images/github-light.png";
+
+import BlurIn from "./ui/thirdparty/blur-in";
 import { NavigationMenu,
 	NavigationMenuItem,
 	NavigationMenuLink,
@@ -24,10 +26,10 @@ import { NavigationMenu,
 export default function Navigation( {
 	theme,
 	source
-}: {
+}: Readonly<{
 	theme: string;
 	source: string;
-} )
+}> )
 {
 	// Déclaration des variables d'état.
 	const headerMessages = useTranslations( "header" );
@@ -58,11 +60,21 @@ export default function Navigation( {
 							href="/dashboard"
 							className={navigationMenuTriggerStyle()}
 						>
-							<LayoutDashboard className="size-5 md:hidden" />
+							<BlurIn
+								as="div"
+								duration={0.4}
+								className="text-black dark:text-white"
+							>
+								<LayoutDashboard className="size-5 md:hidden" />
+							</BlurIn>
 
-							<span className="hidden md:inline">
+							<BlurIn
+								as="span"
+								duration={0.4}
+								className="hidden text-black dark:text-white md:inline"
+							>
 								{headerMessages( "dashboard" )}
-							</span>
+							</BlurIn>
 						</Link>
 					</NavigationMenuLink>
 				</NavigationMenuItem>
@@ -73,11 +85,21 @@ export default function Navigation( {
 						id="settings"
 						aria-controls="settings"
 					>
-						<Settings className="size-5 md:hidden" />
+						<BlurIn
+							as="div"
+							duration={0.4}
+							className="text-black dark:text-white"
+						>
+							<Settings className="size-5 md:hidden" />
+						</BlurIn>
 
-						<span className="hidden md:inline">
+						<BlurIn
+							as="span"
+							duration={0.4}
+							className="hidden text-black dark:text-white md:inline"
+						>
 							{headerMessages( "settings" )}
-						</span>
+						</BlurIn>
 					</NavigationMenuTrigger>
 
 					<NavigationMenuContent>

diff --git a/app/[locale]/dashboard/page.tsx b/app/[locale]/dashboard/page.tsx
@@ -22,6 +22,7 @@ import { generateMetadata as getMetadata } from "../layout";
 import { Separator } from "../components/ui/separator";
 
 const UserMenu = lazy( () => import( "../components/user-menu" ) );
+const FadeText = lazy( () => import( "../components/ui/thirdparty/fade-text" ) );
 const DataTable = lazy( () => import( "./components/data-table" ) );
 const Navigation = lazy( () => import( "../components/navigation" ) );
 const Notification = lazy( () => import( "../components/notification" ) );
@@ -126,9 +127,9 @@ async function getFiles(): Promise<FileAttributes[]>
 // Affichage de la page.
 export default async function Page( {
 	params
-}: {
+}: Readonly<{
 	params: Promise<{ locale: string }>;
-} )
+}> )
 {
 	// Définition de la langue de la page.
 	const { locale } = await params;
@@ -176,13 +177,22 @@ export default async function Page( {
 
 			<main className="container mx-auto max-w-[1440px] p-4 md:p-8">
 				{/* Titre et description de la page */}
-				<h2 className="text-2xl font-bold tracking-tight">
+				<FadeText
+					as="h2"
+					className="text-2xl font-bold tracking-tight"
+					direction="left"
+				>
 					{messages( "header.dashboard" )}
-				</h2>
-
-				<p className="text-muted-foreground">
+				</FadeText>
+
+				<FadeText
+					as="p"
+					delay={0.2}
+					className="text-muted-foreground"
+					direction="left"
+				>
 					{messages( "dashboard.description" )}
-				</p>
+				</FadeText>
 
 				{/* Barre verticale de séparation */}
 				<Separator className="mb-6 mt-4 md:mb-8 md:mt-6" />

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -11,6 +11,7 @@ import pick from "lodash/pick";
 import { join } from "path";
 import { existsSync } from "fs";
 import type { Toaster } from "sonner";
+import { MotionConfig } from "framer-motion";
 import { lazy,
 	Suspense,
 	type ReactNode,
@@ -214,10 +215,10 @@ type ToasterProps = ComponentProps<typeof Toaster>;
 export default async function Layout( {
 	children,
 	params
-}: {
+}: Readonly<{
 	children: ReactNode;
 	params: Promise<{ locale: string }>;
-} )
+}> )
 {
 	// Définition de la langue de la page.
 	const { locale } = await params;
@@ -317,7 +318,9 @@ export default async function Layout( {
 						</video>
 
 						{/* Composant enfant */}
-						{children}
+						<MotionConfig reducedMotion="user">
+							{children}
+						</MotionConfig>
 
 						{/* Consentement des cookies */}
 						<CookieConsent />

diff --git a/app/[locale]/legal/privacy/page.tsx b/app/[locale]/legal/privacy/page.tsx
@@ -3,6 +3,7 @@
 //
 
 // Importation des dépendances.
+import { lazy } from "react";
 import type { Metadata } from "next";
 import { setRequestLocale, getTranslations } from "next-intl/server";
 
@@ -12,6 +13,8 @@ import { generateMetadata as getMetadata } from "../../layout";
 // Importation des composants.
 import { Separator } from "../../components/ui/separator";
 
+const FadeText = lazy( () => import( "../../components/ui/thirdparty/fade-text" ) );
+
 // Déclaration des propriétés de la page.
 export async function generateMetadata(): Promise<Metadata>
 {
@@ -26,9 +29,9 @@ export async function generateMetadata(): Promise<Metadata>
 // Affichage de la page.
 export default async function Page( {
 	params
-}: {
+}: Readonly<{
 	params: Promise<{ locale: string }>;
-} )
+}> )
 {
 	// Définition de la langue de la page.
 	const { locale } = await params;
@@ -44,13 +47,22 @@ export default async function Page( {
 		<main className="container mx-auto max-w-[1440px] p-8 max-md:p-4 max-md:pb-8">
 			{/* En-tête de la page */}
 			<header>
-				<h2 className="text-2xl font-bold tracking-tight">
+				<FadeText
+					as="h2"
+					className="text-2xl font-bold tracking-tight"
+					direction="left"
+				>
 					{messages( "legal.privacy_title" )}
-				</h2>
+				</FadeText>
 
-				<p className="text-muted-foreground">
+				<FadeText
+					as="p"
+					delay={0.2}
+					className="text-muted-foreground"
+					direction="left"
+				>
 					{messages( "legal.privacy_description" )}
-				</p>
+				</FadeText>
 			</header>
 
 			{/* Barre verticale de séparation */}

diff --git a/app/[locale]/legal/terms/page.tsx b/app/[locale]/legal/terms/page.tsx
@@ -3,6 +3,7 @@
 //
 
 // Importation des dépendances.
+import { lazy } from "react";
 import type { Metadata } from "next";
 import { setRequestLocale, getTranslations } from "next-intl/server";
 
@@ -12,6 +13,8 @@ import { generateMetadata as getMetadata } from "../../layout";
 // Importation des composants.
 import { Separator } from "../../components/ui/separator";
 
+const FadeText = lazy( () => import( "../../components/ui/thirdparty/fade-text" ) );
+
 // Déclaration des propriétés de la page.
 export async function generateMetadata(): Promise<Metadata>
 {
@@ -26,9 +29,9 @@ export async function generateMetadata(): Promise<Metadata>
 // Affichage de la page.
 export default async function Page( {
 	params
-}: {
+}: Readonly<{
 	params: Promise<{ locale: string }>;
-} )
+}> )
 {
 	// Définition de la langue de la page.
 	const { locale } = await params;
@@ -44,13 +47,22 @@ export default async function Page( {
 		<main className="container mx-auto max-w-[1440px] p-8 max-md:p-4 max-md:pb-8">
 			{/* En-tête de la page */}
 			<header>
-				<h2 className="text-2xl font-bold tracking-tight">
+				<FadeText
+					as="h2"
+					className="text-2xl font-bold tracking-tight"
+					direction="left"
+				>
 					{messages( "legal.terms_title" )}
-				</h2>
+				</FadeText>
 
-				<p className="text-muted-foreground">
+				<FadeText
+					as="p"
+					delay={0.2}
+					className="text-muted-foreground"
+					direction="left"
+				>
 					{messages( "legal.terms_description" )}
-				</p>
+				</FadeText>
 			</header>
 
 			{/* Barre verticale de séparation */}