From 90945b161d5ac1a6567bbe59edf8bf1ade3c0da7 Mon Sep 17 00:00:00 2001 From: cdricms <36056008+cdricms@users.noreply.github.com> Date: Fri, 31 Jan 2025 17:28:13 +0100 Subject: [PATCH] Added theme switcher + optimized youtube loading + about changes --- frontend/app/(main)/about/page.tsx | 95 ++------ frontend/app/(main)/page.tsx | 16 +- frontend/app/layout.tsx | 2 +- frontend/components/nav-bar.tsx | 312 +++++++++++-------------- frontend/components/planning.tsx | 27 ++- frontend/components/theme-switcher.tsx | 40 ++++ frontend/components/youtube-embed.tsx | 77 ++++++ frontend/next.config.ts | 4 + 8 files changed, 306 insertions(+), 267 deletions(-) create mode 100644 frontend/components/theme-switcher.tsx create mode 100644 frontend/components/youtube-embed.tsx diff --git a/frontend/app/(main)/about/page.tsx b/frontend/app/(main)/about/page.tsx index e8ef1be..4bf4064 100644 --- a/frontend/app/(main)/about/page.tsx +++ b/frontend/app/(main)/about/page.tsx @@ -23,22 +23,18 @@ export default async function About() { ); return ( <> -
-
-
- +
+
+
+ - - Entraîneur depuis 60 ans + + Nicolas GORUK - - Robert Louis Jean Jacke - + + Président l'association française de Latosa + Escrima +
@@ -47,74 +43,30 @@ export default async function About() {

Lorem ipsum dolor sit amet consectetur - adipisicing elit. Debitis accusamus illum, - nam nemo quod delectus velit repellat odio - dolorum sapiente soluta, aliquam atque - praesentium ea placeat ad, neque eveniet - adipisci? + adipisicing elit. Debitis accusamus + illum, nam nemo quod delectus velit + repellat odio dolorum sapiente soluta, + aliquam atque praesentium ea placeat ad, + neque eveniet adipisci?

Lorem ipsum, dolor sit amet

Lorem ipsum dolor sit amet consectetur - adipisicing elit. Debitis accusamus illum, - nam nemo quod delectus velit repellat odio - dolorum sapiente soluta, aliquam atque - praesentium ea placeat ad, neque eveniet - adipisci? + adipisicing elit. Debitis accusamus + illum, nam nemo quod delectus velit + repellat odio dolorum sapiente soluta, + aliquam atque praesentium ea placeat ad, + neque eveniet adipisci?

-
-

- Mes associés -

-
- - - -
- Richard Vagneur -
- - CN - - - -
- Robert Lewis -
- CN - - - -
- Marria Caré -
- CN - -
-
-
+
president profile image @@ -129,7 +81,8 @@ export default async function About() { l'état" possible.

- equipement (gants, casque) pris en compte. Prévoir une tenue sportive adaptée. + equipement (gants, casque) pris en compte. Prévoir une + tenue sportive adaptée.

diff --git a/frontend/app/(main)/page.tsx b/frontend/app/(main)/page.tsx index 18f0266..d584290 100644 --- a/frontend/app/(main)/page.tsx +++ b/frontend/app/(main)/page.tsx @@ -5,6 +5,7 @@ import Gallery from "@/components/gallery"; import Hero from "@/components/hero"; import Testimonial from "@/components/testimonial"; import { CarouselItem } from "@/components/ui/carousel"; +import YouTubeEmbed from "@/components/youtube-embed"; import { IYoutube } from "@/interfaces/youtube"; export default async function Home() { @@ -17,6 +18,15 @@ export default async function Home() { return (
+
+ +
- + ); })} diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 53a8187..d7c8acf 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -36,7 +36,7 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + diff --git a/frontend/components/nav-bar.tsx b/frontend/components/nav-bar.tsx index 6fee23e..d3fab0b 100644 --- a/frontend/components/nav-bar.tsx +++ b/frontend/components/nav-bar.tsx @@ -21,6 +21,7 @@ import { import Link from "next/link"; import { deleteCookie, getCookie } from "cookies-next"; import { useEffect, useState } from "react"; +import { ThemeSwitcher } from "./theme-switcher"; const subMenuItemsOne = [ { @@ -142,6 +143,7 @@ const Navbar = () => {
+
- - - - - - - -
- logo - - Latosa-Escrima - +
+ + + + + + + + +
+ logo + + Latosa-Escrima + +
+ + +
+ + Accueil + + + Planning + + + À propos + + + Blog + +
+
+ +
+ +
- - -
- - Accueil - - - - - Products - - - {subMenuItemsOne.map( - (item, idx) => ( - - {item.icon} -
-
- {item.title} -
-

- { - item.description - } -

-
- - ), - )} - - - - - Resources - - - {subMenuItemsTwo.map( - (item, idx) => ( - - {item.icon} -
-
- {item.title} -
-

- { - item.description - } -

-
- - ), - )} - - - - - Pricing - - - Blog - -
- - - + + +
diff --git a/frontend/components/planning.tsx b/frontend/components/planning.tsx index f00ee10..772aca8 100644 --- a/frontend/components/planning.tsx +++ b/frontend/components/planning.tsx @@ -1,6 +1,6 @@ "use client"; -import { ApiResponse, request, useApi } from "@/hooks/use-api"; +import { ApiResponse, request } from "@/hooks/use-api"; import "@schedule-x/theme-shadcn/dist/index.css"; import { useNextCalendarApp, ScheduleXCalendar } from "@schedule-x/react"; import { createEventsServicePlugin } from "@schedule-x/events-service"; @@ -26,17 +26,24 @@ import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { KeyedMutator } from "swr"; +import { getCookie } from "cookies-next"; +import { useTheme } from "next-themes"; const Planning: React.FC<{ events: CalendarEventExternal[]; mutate?: KeyedMutator>; }> = ({ events, mutate }) => { - const plugins = [ - createEventsServicePlugin(), - createDragAndDropPlugin(), - createResizePlugin(), - createEventRecurrencePlugin(), - ]; + const { resolvedTheme } = useTheme(); + console.log(resolvedTheme); + const isConnected = getCookie("auth_token"); + const plugins = isConnected + ? [ + createEventsServicePlugin(), + createDragAndDropPlugin(), + createResizePlugin(), + createEventRecurrencePlugin(), + ] + : []; const [eventSelected, setEventSelected] = useState(null); const [newEvent, setNewEvent] = useState { + calendar?.setTheme(resolvedTheme === "dark" ? "dark" : "light"); + }, [resolvedTheme]); + const AddButton: React.FC = () => ( + + + setTheme("light")}> + Clair + + setTheme("dark")}> + Sombre + + setTheme("system")}> + Système + + + + ); +} diff --git a/frontend/components/youtube-embed.tsx b/frontend/components/youtube-embed.tsx new file mode 100644 index 0000000..75dd033 --- /dev/null +++ b/frontend/components/youtube-embed.tsx @@ -0,0 +1,77 @@ +"use client"; +import { IYoutubeItem } from "@/interfaces/youtube"; +import Image from "next/image"; +import { useState } from "react"; + +export default function YouTubeEmbed({ + video, + width = 424, + height = 238, + loadIframe = false, + autoPlay = true, +}: { + video: IYoutubeItem | string; + width?: number | "full"; + height?: number | "full"; + loadIframe?: boolean; + autoPlay?: boolean; +}) { + const [isIframeLoaded, setIframeLoaded] = useState(loadIframe); + + const isString = typeof video === "string"; + + const _loadIframe = () => setIframeLoaded(true); + + return ( +
+ {isIframeLoaded ? ( +