From e5d12002375b584cc9118003969026a27d7e1fbe Mon Sep 17 00:00:00 2001 From: Florian Trayon <26360935+FlorianLeChat@users.noreply.github.com> Date: Sat, 14 Dec 2024 18:24:17 +0100 Subject: [PATCH] Added a bunch of animations on frequently used custom components --- app/[locale]/authentication/page.tsx | 49 +++-- app/[locale]/components/header.tsx | 6 +- app/[locale]/components/navigation.tsx | 38 +++- app/[locale]/dashboard/page.tsx | 24 ++- app/[locale]/layout.tsx | 9 +- app/[locale]/legal/privacy/page.tsx | 24 ++- app/[locale]/legal/terms/page.tsx | 24 ++- app/[locale]/page.tsx | 218 +++++++++++++++----- app/[locale]/settings/components/routes.tsx | 27 ++- app/[locale]/settings/layout.tsx | 24 ++- 10 files changed, 330 insertions(+), 113 deletions(-) diff --git a/app/[locale]/authentication/page.tsx b/app/[locale]/authentication/page.tsx index dddb0c5..2998581 100644 --- 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 @@ -38,9 +43,9 @@ export async function generateMetadata(): Promise // 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,13 +92,19 @@ export default async function Page( { {/* Formulaire d'inscription */} {/* Titre et description du formulaire */} -

- {messages( "authentication.register_title" )} -

- -

+ + + {messages( "authentication.register_description" )} -

+ @@ -101,13 +112,19 @@ export default async function Page( { {/* Formulaire de connexion */} {/* Titre et description du formulaire */} -

- {messages( "authentication.login_title" )} -

- -

+ + + {messages( "authentication.login_description" )} -

+ @@ -127,7 +144,7 @@ export default async function Page( { {/* Conditions d'utilisation et politique de confidentialité */} -

+ {messages.rich( "authentication.accept_terms", { a1: ( chunks ) => ( ) } )} -

+ ); diff --git a/app/[locale]/components/header.tsx b/app/[locale]/components/header.tsx index e5d91af..f28eaaa 100644 --- 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 index d344a2b..b77dbcc 100644 --- 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()} > - + + + - + {headerMessages( "dashboard" )} - + @@ -73,11 +85,21 @@ export default function Navigation( { id="settings" aria-controls="settings" > - + + + - + {headerMessages( "settings" )} - + diff --git a/app/[locale]/dashboard/page.tsx b/app/[locale]/dashboard/page.tsx index 1ffe67d..1273969 100644 --- 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 // 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( {
{/* Titre et description de la page */} -

+ {messages( "header.dashboard" )} -

- -

+ + + {messages( "dashboard.description" )} -

+ {/* Barre verticale de séparation */} diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index b67d160..89c18b5 100644 --- 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; 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( { {/* Composant enfant */} - {children} + + {children} + {/* Consentement des cookies */} diff --git a/app/[locale]/legal/privacy/page.tsx b/app/[locale]/legal/privacy/page.tsx index 40019f9..74ecc8a 100644 --- 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 { @@ -26,9 +29,9 @@ export async function generateMetadata(): Promise // 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( {
{/* En-tête de la page */}
-

+ {messages( "legal.privacy_title" )} -

+ -

+ {messages( "legal.privacy_description" )} -

+
{/* Barre verticale de séparation */} diff --git a/app/[locale]/legal/terms/page.tsx b/app/[locale]/legal/terms/page.tsx index a954357..d337c9a 100644 --- 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 { @@ -26,9 +29,9 @@ export async function generateMetadata(): Promise // 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( {
{/* En-tête de la page */}
-

+ {messages( "legal.terms_title" )} -

+ -

+ {messages( "legal.terms_description" )} -

+
{/* Barre verticale de séparation */} diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 10522f2..57f4276 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -15,6 +15,11 @@ import { generateMetadata as getMetadata } from "./layout"; // Importation des composants. const Header = lazy( () => import( "./components/header" ) ); +const BlurIn = lazy( () => import( "./components/ui/thirdparty/blur-in" ) ); +const FadeText = lazy( () => import( "./components/ui/thirdparty/fade-text" ) ); +const WordPullUp = lazy( + () => import( "./components/ui/thirdparty/word-pull-up" ) +); // Déclaration des propriétés de la page. export async function generateMetadata(): Promise @@ -30,9 +35,9 @@ export async function generateMetadata(): Promise // 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; @@ -52,85 +57,194 @@ export default async function Page( { {/* Contenu de la page */}
-

- {messages( "index.title" )} -

- -

+ + + {messages( "index.subtitle" )} -

+
  • - - -

    + + + + + {messages( "index.features.title_1" )} -

    - -

    + + + {messages( "index.features.description_1" )} -

    +
  • - - -

    + + + + + {messages( "index.features.title_2" )} -

    - -

    + + + {messages( "index.features.description_2" )} -

    +
  • - - -

    + + + + + {messages( "index.features.title_3" )} -

    - -

    + + + {messages( "index.features.description_3" )} -

    +
  • - - -

    - {messages( "index.features.title_4" )} -

    - -

    - {messages( "index.features.description_4" )} -

    + + + + + + {messages( "index.features.title_3" )} + + + + {messages( "index.features.description_3" )} +
  • - - -

    + + + + + {messages( "index.features.title_5" )} -

    - -

    + + + {messages( "index.features.description_5" )} -

    +
  • - - -

    + + + + + {messages( "index.features.title_6" )} -

    - -

    + + + {messages( "index.features.description_6" )} -

    +
diff --git a/app/[locale]/settings/components/routes.tsx b/app/[locale]/settings/components/routes.tsx index 4a9c4ee..b5d251c 100644 --- a/app/[locale]/settings/components/routes.tsx +++ b/app/[locale]/settings/components/routes.tsx @@ -11,6 +11,9 @@ import { routes } from "@/config/routes"; import { usePathname } from "next/navigation"; import { useTranslations } from "next-intl"; import { showPreferences } from "vanilla-cookieconsent"; + +import BlurIn from "../../components/ui/thirdparty/blur-in"; +import FadeText from "../../components/ui/thirdparty/fade-text"; import { Button, buttonVariants } from "../../components/ui/button"; export default function Routes() @@ -35,9 +38,17 @@ export default function Routes() "h-auto min-h-[2.5rem] justify-start" )} > - {route.icon} + + {route.icon} + - {messages( `${ route.id }_title` )} + + {messages( `${ route.id }_title` )} + ) )} @@ -49,9 +60,15 @@ export default function Routes() className="h-auto min-h-10 justify-start text-left" suppressHydrationWarning > - + + + - + {messages( "cookies_title" )} @@ -59,7 +76,7 @@ export default function Routes() u: ( chunks ) => {chunks} } )} - + ); diff --git a/app/[locale]/settings/layout.tsx b/app/[locale]/settings/layout.tsx index 9fa60b0..40b6b7f 100644 --- a/app/[locale]/settings/layout.tsx +++ b/app/[locale]/settings/layout.tsx @@ -17,6 +17,7 @@ import { generateMetadata as getMetadata } from "../layout"; import { Separator } from "../components/ui/separator"; const Routes = lazy( () => import( "./components/routes" ) ); +const FadeText = lazy( () => import( "../components/ui/thirdparty/fade-text" ) ); const UserMenu = lazy( () => import( "../components/user-menu" ) ); const Navigation = lazy( () => import( "../components/navigation" ) ); const Notification = lazy( () => import( "../components/notification" ) ); @@ -35,10 +36,10 @@ export async function generateMetadata(): Promise 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; @@ -87,13 +88,22 @@ export default async function Layout( {
{/* En-tête de la page */}
-

+ {messages( "settings.header" )} -

- -

+ + + {messages( "settings.description" )} -

+
{/* Barre verticale de séparation */}