diff --git a/apps/hub/app/(app)/events/_components/item.tsx b/apps/hub/app/(app)/events/_components/item.tsx new file mode 100644 index 00000000..09168b7b --- /dev/null +++ b/apps/hub/app/(app)/events/_components/item.tsx @@ -0,0 +1,93 @@ +"use client"; +import { DrawingPinFilledIcon, EnterIcon } from "@radix-ui/react-icons"; +import { User } from "@repo/db"; +import ModalBtn from "./modalBtn"; + +export const KursItem = ({ + user, + title, + type, + beschreibung, + badge, + moodleReq, +}: { + user: User; + title: string; + type: string; + beschreibung: string; + badge: string; + moodleReq: boolean; +}) => { + return ( +
+
+
+

{title}

+
+ + Zusatzqualifikation + +
+
+
+

{beschreibung}

+
+
{badge}
+
+
+

+ Teilnahmevoraussetzungen: + + Moodle Kurs /MOODLEKURSTITLE\ + +

+ +
+
+
+
+ ); +}; + +export const PilotKurs = ({ user }: { user: User }) => { + { + /* STATISCH, DA FÜR ALLE NEUEN MITGLIEDER MANDATORY, WIRD AUSGEBLENDET WENN ABSOLVIERT */ + } + return ( +
+
+
+

Einsteigerkurs für Piloten

+
+ + Verpflichtend + +
+
+
+

+ In diesem Kurs lernen Piloten die Grundlagen der Luftrettung, + Einsatzverfahren, den Umgang mit dem BOS-Funk und einige + medizinische Basics. Der Kurs bietet eine ideale Vorbereitung + für alle Standard Operations bei Virtual Air Rescue. +

+
+
Badge
+
+
+

+ Teilnahmevoraussetzungen: Keine +

+ +
+
+
+
+ ); +}; diff --git a/apps/hub/app/(app)/events/_components/modalBtn.tsx b/apps/hub/app/(app)/events/_components/modalBtn.tsx new file mode 100644 index 00000000..54a05b43 --- /dev/null +++ b/apps/hub/app/(app)/events/_components/modalBtn.tsx @@ -0,0 +1,87 @@ +"use client"; +import { useEffect } from "react"; +import { + CheckCircledIcon, + CalendarIcon, + EnterIcon, +} from "@radix-ui/react-icons"; + +interface ModalBtnProps { + title: string; + dates: string[]; + modalId: string; +} + +const ModalBtn = ({ title, dates, modalId }: ModalBtnProps) => { + useEffect(() => { + const modal = document.getElementById(modalId) as HTMLDialogElement; + const handleOpen = () => { + document.body.classList.add("modal-open"); + }; + const handleClose = () => { + document.body.classList.remove("modal-open"); + }; + modal?.addEventListener("show", handleOpen); + modal?.addEventListener("close", handleClose); + return () => { + modal?.removeEventListener("show", handleOpen); + modal?.removeEventListener("close", handleClose); + }; + }, [modalId]); + + const openModal = () => { + const modal = document.getElementById(modalId) as HTMLDialogElement; + document.body.classList.add("modal-open"); + modal?.showModal(); + }; + + const closeModal = () => { + const modal = document.getElementById(modalId) as HTMLDialogElement; + document.body.classList.remove("modal-open"); + modal?.close(); + }; + + return ( + <> + + +
+

{title}

+

+ + Moodle Kurs abgeschlossen +

+
+
+ + +
+

+ Bitte finde dich an diesem Termin in unserem Discord ein. +

+
+
+ + +
+
+ + + + ); +}; + +export default ModalBtn; diff --git a/apps/hub/app/(app)/events/page.tsx b/apps/hub/app/(app)/events/page.tsx new file mode 100644 index 00000000..81d51f59 --- /dev/null +++ b/apps/hub/app/(app)/events/page.tsx @@ -0,0 +1,45 @@ +import { getServerSession } from "../../api/auth/[...nextauth]/auth"; +import { PrismaClient } from "@repo/db"; +import { PilotKurs, KursItem } from "./_components/item"; +import { + RocketIcon, + DrawingPinFilledIcon, + EnterIcon, +} from "@radix-ui/react-icons"; + +export default async () => { + const prisma = new PrismaClient(); + const session = await getServerSession(); + if (!session) return null; + const user = await prisma.user.findFirst({ + where: { + id: session.user.id, + }, + }); + if (!user) return null; + return ( +
+
+

+ Events & Kurse +

+
+ + +
+ ); +}; diff --git a/apps/hub/app/(app)/layout.tsx b/apps/hub/app/(app)/layout.tsx index 66cdb924..28c701a2 100644 --- a/apps/hub/app/(app)/layout.tsx +++ b/apps/hub/app/(app)/layout.tsx @@ -1,18 +1,18 @@ -import type { Metadata } from 'next'; +import type { Metadata } from "next"; import { DiscordLogoIcon, InstagramLogoIcon, ReaderIcon, -} from '@radix-ui/react-icons'; -import { HorizontalNav, VerticalNav } from '../_components/Nav'; -import { Toaster } from 'react-hot-toast'; -import { redirect } from 'next/navigation'; -import { getServerSession } from '../api/auth/[...nextauth]/auth'; -import { headers } from 'next/headers'; +} from "@radix-ui/react-icons"; +import { HorizontalNav, VerticalNav } from "../_components/Nav"; +import { Toaster } from "react-hot-toast"; +import { redirect } from "next/navigation"; +import { getServerSession } from "../api/auth/[...nextauth]/auth"; +import { headers } from "next/headers"; export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', + title: "Create Next App", + description: "Generated by create next app", }; export default async function RootLayout({ @@ -47,7 +47,7 @@ export default async function RootLayout({ {/* Scrollbarer Content-Bereich */} -
+
{children}
diff --git a/apps/hub/app/_components/ui/Nav.tsx b/apps/hub/app/_components/ui/Nav.tsx new file mode 100644 index 00000000..9557357f --- /dev/null +++ b/apps/hub/app/_components/ui/Nav.tsx @@ -0,0 +1,87 @@ +import { + HomeIcon, + PersonIcon, + GearIcon, + ExitIcon, + LockClosedIcon, + RocketIcon, +} from "@radix-ui/react-icons"; +import Link from "next/link"; + +export const VerticalNav = () => { + return ( +
+ +
+ ); +}; + +export const HorizontalNav = () => ( +
+
+ + Virtual Air Rescue - HUB + +
+
+
    +
  • + + + +
    • +
  • + + + +
    • +
+
+
+); diff --git a/apps/hub/app/globals.css b/apps/hub/app/globals.css index 3dbb901a..feb39102 100644 --- a/apps/hub/app/globals.css +++ b/apps/hub/app/globals.css @@ -25,3 +25,7 @@ /* --p: 47.67% 0.2484 267.02; */ --nc: #a6adbb; } + +body.modal-open { + overflow: hidden; +}