PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fixed ui

Browse Source
This commit is contained in:
nocnico
2025-03-17 20:29:40 +01:00
parent 9a7049ec44
commit 3101c61584
2 changed files with 37 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx
View File

@@ -5,6 +5,7 @@ import { Connection } from "./_components/Connection";
import { ThemeSwap } from "./_components/ThemeSwap";
import { Audio } from "./_components/Audio";
import { useState } from "react";
import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
export default function Navbar() {
const [isDark, setIsDark] = useState(false);
@@ -26,31 +27,18 @@ export default function Navbar() {
<div className="flex gap-2">
<Audio />
</div>
<div className="flex gap-6">
<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
<div className="flex gap-5 items-center">
<div className="flex items-center">
<Connection />
</div>
<div className="dropdown dropdown-end">
<div tabIndex={0} role="button" className="btn btn-ghost">
...
</div>
<ul
tabIndex={0}
className="menu menu-sm dropdown-content bg-base-100 box z-1 mt-3 w-52 p-2 shadow"
>
<li>
<a className="justify-between">Profil</a>
</li>
<li>
<a>Einstellungen</a>
</li>
<li>
<Link href={"/logout"}>
<p>Logout</p>
</Link>
</li>
</ul>
<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
<div className="flex items-center">
<button className="btn btn-ghost">
<ExternalLinkIcon className="w-4 h-4" /> HUB
</button>
<button className="btn btn-ghost">
<ExitIcon className="w-4 h-4" />
</button>
</div>
</div>
</div>

44
apps/dispatch/app/(dispatch)/_components/navbar/_components/Audio.tsx
View File

@@ -3,7 +3,6 @@
import { useEffect, useState } from "react";
import { useConnectionStore } from "_store/connectionStore";
import {
Circle,
Disc,
Mic,
PlugZap,
@@ -50,7 +49,7 @@ export const Audio = () => {
return (
<>
<div className="bg-base-200 rounded-box flex items-center gap-2 p-3">
<div className="bg-base-200 rounded-box flex items-center gap-2 p-1">
<button
onClick={() => {
if (state === "connected") toggleTalking();
@@ -65,30 +64,38 @@ export const Audio = () => {
"bg-yellow-500 hover:bg-yellow-500 cursor-default",
)}
>
{state === "connected" && <Mic />}
{state === "disconnected" && <WifiOff />}
{state === "connecting" && <PlugZap />}
{state === "connected" && <Mic className="w-5 h-5" />}
{state === "disconnected" && <WifiOff className="w-5 h-5" />}
{state === "connecting" && <PlugZap className="w-5 h-5" />}
</button>
{state === "connected" && (
<details className="dropdown">
<details className="dropdown relative z-[1050]">
<summary className="dropdown btn btn-ghost flex items-center gap-1">
{connectionQuality === ConnectionQuality.Excellent && <Signal />}
{connectionQuality === ConnectionQuality.Good && <SignalMedium />}
{connectionQuality === ConnectionQuality.Poor && <SignalLow />}
{connectionQuality === ConnectionQuality.Lost && <ZapOff />}
{connectionQuality === ConnectionQuality.Unknown && (
<ShieldQuestion />
{connectionQuality === ConnectionQuality.Excellent && (
<Signal className="w-5 h-5" />
)}
<div className="badge badge-soft badge-success">
{connectionQuality === ConnectionQuality.Good && (
<SignalMedium className="w-5 h-5" />
)}
{connectionQuality === ConnectionQuality.Poor && (
<SignalLow className="w-5 h-5" />
)}
{connectionQuality === ConnectionQuality.Lost && (
<ZapOff className="w-5 h-5" />
)}
{connectionQuality === ConnectionQuality.Unknown && (
<ShieldQuestion className="w-5 h-5" />
)}
<div className="badge badge-sm badge-soft badge-success">
{remoteParticipants}
</div>
</summary>
<ul className="menu dropdown-content bg-base-100 rounded-box z-[99999999] w-52 p-2 shadow-sm">
<ul className="menu dropdown-content bg-base-200 rounded-box z-[1050] w-52 p-2 shadow-sm">
{ROOMS.map((r) => (
<li key={r}>
<button
className="btn btn-sm btn-ghost text-left"
className="btn btn-sm btn-ghost text-left flex items-center justify-start gap-2 relative"
onClick={() => {
if (selectedRoom === r) return;
setSelectedRoom(r);
@@ -96,9 +103,12 @@ export const Audio = () => {
}}
>
{room?.name === r && (
<Disc className="text-success text-sm" width={15} />
<Disc
className="text-success text-sm absolute left-2"
width={15}
/>
)}
{r}
<span className="flex-1 text-center">{r}</span>
</button>
</li>
))}