Moved Dispatch NAvbar component, to remove code dupl.; Fixed timezone bug in hub
This commit is contained in:
32
apps/dispatch/app/(app)/_components/Navbar.tsx
Normal file
32
apps/dispatch/app/(app)/_components/Navbar.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { ExitIcon } from "@radix-ui/react-icons";
|
||||
import Link from "next/link";
|
||||
import { prisma } from "@repo/db";
|
||||
import { ChangelogWrapper } from "_components/navbar/ChangelogWrapper";
|
||||
import ModeSwitchDropdown from "_components/navbar/ModeSwitchDropdown";
|
||||
|
||||
export default async function Navbar({ children }: { children: React.ReactNode }) {
|
||||
const latestChangelog = await prisma.changelog.findFirst({
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className="navbar bg-base-100 flex justify-between gap-5 shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<p className="text-xl font-semibold normal-case">VAR Operations Center</p>
|
||||
<ChangelogWrapper latestChangelog={latestChangelog} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{children}
|
||||
<ModeSwitchDropdown className="dropdown-center" btnClassName="btn-ghost" />
|
||||
<Link href={"/logout"}>
|
||||
<button className="btn btn-ghost">
|
||||
<ExitIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
"use client";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useDispatchConnectionStore } from "../../../../../_store/dispatch/connectionStore";
|
||||
import { useDispatchConnectionStore } from "../../../../_store/dispatch/connectionStore";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { Prisma } from "@repo/db";
|
||||
@@ -1,63 +0,0 @@
|
||||
import { Connection } from "./_components/Connection";
|
||||
import { Audio } from "../../../../_components/Audio/Audio";
|
||||
import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
|
||||
import Link from "next/link";
|
||||
import { Settings } from "./_components/Settings";
|
||||
import AdminPanel from "_components/navbar/AdminPanel";
|
||||
import { getServerSession } from "api/auth/[...nextauth]/auth";
|
||||
import { WarningAlert } from "_components/navbar/PageAlert";
|
||||
import { Radar } from "lucide-react";
|
||||
import { ChangelogWrapper } from "_components/navbar/ChangelogWrapper";
|
||||
import { prisma } from "@repo/db";
|
||||
|
||||
export default async function Navbar() {
|
||||
const session = await getServerSession();
|
||||
const latestChangelog = await prisma.changelog.findFirst({
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="navbar bg-base-100 flex justify-between gap-5 shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<p className="text-xl font-semibold normal-case">VAR Leitstelle</p>
|
||||
<ChangelogWrapper latestChangelog={latestChangelog} />
|
||||
</div>
|
||||
{session?.user.permissions.includes("ADMIN_KICK") && <AdminPanel />}
|
||||
</div>
|
||||
<WarningAlert />
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Audio />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Connection />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Settings />
|
||||
<Link href={"/tracker"} target="_blank" rel="noopener noreferrer">
|
||||
<button className="btn btn-ghost">
|
||||
<Radar size={19} /> Tracker
|
||||
</button>
|
||||
</Link>
|
||||
<Link
|
||||
href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="btn btn-ghost">
|
||||
<ExternalLinkIcon className="h-4 w-4" /> HUB
|
||||
</button>
|
||||
</Link>
|
||||
<Link href={"/logout"}>
|
||||
<button className="btn btn-ghost">
|
||||
<ExitIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
|
||||
|
||||
interface ThemeSwapProps {
|
||||
isDark: boolean;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
export const ThemeSwap: React.FC<ThemeSwapProps> = ({
|
||||
isDark,
|
||||
toggleTheme,
|
||||
}) => {
|
||||
return (
|
||||
<label className="swap swap-rotate">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="theme-controller"
|
||||
checked={isDark}
|
||||
onChange={toggleTheme}
|
||||
/>
|
||||
<MoonIcon className="swap-off h-5 w-5 fill-current" />
|
||||
<SunIcon className="swap-on h-5 w-5 fill-current" />
|
||||
</label>
|
||||
);
|
||||
};
|
||||
@@ -1,7 +1,10 @@
|
||||
import type { Metadata } from "next";
|
||||
import Navbar from "./_components/navbar/Navbar";
|
||||
import { getServerSession } from "api/auth/[...nextauth]/auth";
|
||||
import { Error } from "_components/Error";
|
||||
import Navbar from "(app)/_components/Navbar";
|
||||
import { Audio } from "_components/Audio/Audio";
|
||||
import { Connection } from "./_components/navbar/Connection";
|
||||
import { Settings } from "./_components/navbar/Settings";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "VAR: Disponent",
|
||||
@@ -26,7 +29,11 @@ export default async function RootLayout({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<Navbar>
|
||||
<Audio />
|
||||
<Connection />
|
||||
<Settings />
|
||||
</Navbar>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
import { Connection } from "./_components/Connection";
|
||||
import { Audio } from "_components/Audio/Audio";
|
||||
import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
|
||||
import Link from "next/link";
|
||||
import { Settings } from "./_components/Settings";
|
||||
import { WarningAlert } from "_components/navbar/PageAlert";
|
||||
import { Radar } from "lucide-react";
|
||||
import { prisma } from "@repo/db";
|
||||
import { ChangelogWrapper } from "_components/navbar/ChangelogWrapper";
|
||||
|
||||
export default async function Navbar() {
|
||||
const latestChangelog = await prisma.changelog.findFirst({
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className="navbar bg-base-100 flex justify-between gap-5 shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<p className="text-xl font-semibold normal-case">VAR Operations Center</p>
|
||||
<ChangelogWrapper latestChangelog={latestChangelog} />
|
||||
</div>
|
||||
</div>
|
||||
<WarningAlert />
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Audio />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Connection />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Settings />
|
||||
<Link href={"/tracker"} target="_blank" rel="noopener noreferrer">
|
||||
<button className="btn btn-ghost">
|
||||
<Radar size={19} /> Tracker
|
||||
</button>
|
||||
</Link>
|
||||
<Link
|
||||
href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="btn btn-ghost">
|
||||
<ExternalLinkIcon className="h-4 w-4" /> HUB
|
||||
</button>
|
||||
</Link>
|
||||
<Link href={"/logout"}>
|
||||
<button className="btn btn-ghost">
|
||||
<ExitIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
|
||||
|
||||
interface ThemeSwapProps {
|
||||
isDark: boolean;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
export const ThemeSwap: React.FC<ThemeSwapProps> = ({
|
||||
isDark,
|
||||
toggleTheme,
|
||||
}) => {
|
||||
return (
|
||||
<label className="swap swap-rotate">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="theme-controller"
|
||||
checked={isDark}
|
||||
onChange={toggleTheme}
|
||||
/>
|
||||
<MoonIcon className="swap-off h-5 w-5 fill-current" />
|
||||
<SunIcon className="swap-on h-5 w-5 fill-current" />
|
||||
</label>
|
||||
);
|
||||
};
|
||||
@@ -1,7 +1,10 @@
|
||||
import type { Metadata } from "next";
|
||||
import Navbar from "./_components/navbar/Navbar";
|
||||
import { getServerSession } from "api/auth/[...nextauth]/auth";
|
||||
import { Error } from "_components/Error";
|
||||
import Navbar from "(app)/_components/Navbar";
|
||||
import { Audio } from "_components/Audio/Audio";
|
||||
import { Connection } from "./_components/navbar/Connection";
|
||||
import { Settings } from "./_components/navbar/Settings";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "VAR: Pilot",
|
||||
@@ -26,7 +29,11 @@ export default async function RootLayout({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<Navbar>
|
||||
<Audio />
|
||||
<Connection />
|
||||
<Settings />
|
||||
</Navbar>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user