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 { ThemeSwap } from "./_components/ThemeSwap";
import { Audio } from "./_components/Audio"; import { Audio } from "./_components/Audio";
import { useState } from "react"; import { useState } from "react";
import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
export default function Navbar() { export default function Navbar() {
const [isDark, setIsDark] = useState(false); const [isDark, setIsDark] = useState(false);
@@ -26,31 +27,18 @@ export default function Navbar() {
<div className="flex gap-2"> <div className="flex gap-2">
<Audio /> <Audio />
</div> </div>
<div className="flex gap-6"> <div className="flex gap-5 items-center">
<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
<div className="flex items-center"> <div className="flex items-center">
<Connection /> <Connection />
</div> </div>
<div className="dropdown dropdown-end"> <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
<div tabIndex={0} role="button" className="btn btn-ghost"> <div className="flex items-center">
... <button className="btn btn-ghost">
</div> <ExternalLinkIcon className="w-4 h-4" /> HUB
<ul </button>
tabIndex={0} <button className="btn btn-ghost">
className="menu menu-sm dropdown-content bg-base-100 box z-1 mt-3 w-52 p-2 shadow" <ExitIcon className="w-4 h-4" />
> </button>
<li>
<a className="justify-between">Profil</a>
</li>
<li>
<a>Einstellungen</a>
</li>
<li>
<Link href={"/logout"}>
<p>Logout</p>
</Link>
</li>
</ul>
</div> </div>
</div> </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 { useEffect, useState } from "react";
import { useConnectionStore } from "_store/connectionStore"; import { useConnectionStore } from "_store/connectionStore";
import { import {
Circle,
Disc, Disc,
Mic, Mic,
PlugZap, PlugZap,
@@ -50,7 +49,7 @@ export const Audio = () => {
return ( 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 <button
onClick={() => { onClick={() => {
if (state === "connected") toggleTalking(); if (state === "connected") toggleTalking();
@@ -65,30 +64,38 @@ export const Audio = () => {
"bg-yellow-500 hover:bg-yellow-500 cursor-default", "bg-yellow-500 hover:bg-yellow-500 cursor-default",
)} )}
> >
{state === "connected" && <Mic />} {state === "connected" && <Mic className="w-5 h-5" />}
{state === "disconnected" && <WifiOff />} {state === "disconnected" && <WifiOff className="w-5 h-5" />}
{state === "connecting" && <PlugZap />} {state === "connecting" && <PlugZap className="w-5 h-5" />}
</button> </button>
{state === "connected" && ( {state === "connected" && (
<details className="dropdown"> <details className="dropdown relative z-[1050]">
<summary className="dropdown btn btn-ghost flex items-center gap-1"> <summary className="dropdown btn btn-ghost flex items-center gap-1">
{connectionQuality === ConnectionQuality.Excellent && <Signal />} {connectionQuality === ConnectionQuality.Excellent && (
{connectionQuality === ConnectionQuality.Good && <SignalMedium />} <Signal className="w-5 h-5" />
{connectionQuality === ConnectionQuality.Poor && <SignalLow />}
{connectionQuality === ConnectionQuality.Lost && <ZapOff />}
{connectionQuality === ConnectionQuality.Unknown && (
<ShieldQuestion />
)} )}
<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} {remoteParticipants}
</div> </div>
</summary> </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) => ( {ROOMS.map((r) => (
<li key={r}> <li key={r}>
<button <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={() => { onClick={() => {
if (selectedRoom === r) return; if (selectedRoom === r) return;
setSelectedRoom(r); setSelectedRoom(r);
@@ -96,9 +103,12 @@ export const Audio = () => {
}} }}
> >
{room?.name === r && ( {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> </button>
</li> </li>
))} ))}