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

Add Settings to Navbar, disable ThemeSwap (who uses light-mode anyway)

Browse Source
This commit is contained in:
nocnico
2025-05-22 01:14:00 +02:00
parent b615ad9ec8
commit 65fa2a6271
5 changed files with 221 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/dispatch/app/dispatch/_components/navbar/Navbar.tsx
View File

@@ -1,14 +1,15 @@
"use client";
import { Connection } from "./_components/Connection";
import { ThemeSwap } from "./_components/ThemeSwap";
/* import { ThemeSwap } from "./_components/ThemeSwap"; */
import { Audio } from "../../../_components/Audio";
import { useState } from "react";
/* import { useState } from "react"; */
import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import { SettingsBtn } from "./_components/Settings";
export default function Navbar() {
const [isDark, setIsDark] = useState(false);
/* const [isDark, setIsDark] = useState(false);
const toggleTheme = () => {
const newTheme = !isDark;
@@ -17,7 +18,7 @@ export default function Navbar() {
"data-theme",
newTheme ? "nord" : "dark",
);
};
}; */
return (
<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
@@ -32,8 +33,9 @@ export default function Navbar() {
<div className="flex items-center">
<Connection />
</div>
<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
<div className="flex items-center">
<SettingsBtn />
<Link
href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
target="_blank"

2
apps/dispatch/app/dispatch/_components/navbar/_components/Connection.tsx
View File

@@ -38,7 +38,7 @@ export const ConnectionBtn = () => {
onClick={() => {
modalRef.current?.showModal();
}}
className="btn btn-soft btn-info"
className="btn btn-sm btn-soft btn-info"
>
{connection.status == "disconnected"
? "Verbinden"

103
apps/dispatch/app/dispatch/_components/navbar/_components/Settings.tsx Normal file
View File

@@ -0,0 +1,103 @@
"use client";
import { useRef } from "react";
import { GearIcon } from "@radix-ui/react-icons";
import { SettingsIcon, Volume2 } from "lucide-react";
export const SettingsBtn = () => {
const modalRef = useRef<HTMLDialogElement>(null);
return (
<div>
<button
className="btn btn-ghost"
onSubmit={() => false}
onClick={() => {
modalRef.current?.showModal();
}}
>
<GearIcon className="w-5 h-5" />
</button>
<dialog ref={modalRef} className="modal">
<div className="modal-box">
<h3 className="flex items-center gap-2 text-lg font-bold mb-5">
<SettingsIcon size={20} /> Einstellungen
</h3>
<div className="flex flex-col items-center justify-center">
<fieldset className="fieldset w-full">
<label className="floating-label w-full text-base">
<span>Eingabegerät</span>
<select className="input w-full" defaultValue={0}>
<option key={0} value={0} disabled>
Bitte wähle ein Eingabegerät...
</option>
<option key={1} value={1}>
Audiogerät 1
</option>
<option key={2} value={2}>
Audiogerät 2
</option>
<option key={3} value={3}>
Audiogerät 3
</option>
</select>
</label>
</fieldset>
{/* FÜGE HIER BITTE DEN MIKROFONAUSSCHLAG EIN WIE IN DER V1 */}
<div className="divider w-full" />
</div>
<p className="flex items-center gap-2 text-base mb-2">
<Volume2 size={20} /> Ausgabelautstärke
</p>
<div className="w-full">
<input
type="range"
min={0}
max={100}
defaultValue={40}
className="range range-xs range-accent w-full"
/>
<div className="flex justify-between px-2.5 mt-2 text-xs">
<span>0</span>
<span>25</span>
<span>50</span>
<span>75</span>
<span>100</span>
</div>
</div>
<div className="flex justify-between modal-action">
<button
className="btn btn-soft"
type="submit"
onSubmit={() => false}
onClick={() => {
modalRef.current?.close();
}}
>
Schließen
</button>
<button
className="btn btn-soft btn-success"
type="submit"
onSubmit={() => false}
onClick={() => {
modalRef.current?.close();
}}
>
Speichern
</button>
</div>
</div>
</dialog>
</div>
);
};
export const Settings = () => {
return (
<div>
<SettingsBtn />
</div>
);
};

12
apps/dispatch/app/pilot/_components/navbar/Navbar.tsx
View File

@@ -1,14 +1,15 @@
"use client";
import { Connection } from "./Connection";
import { ThemeSwap } from "./ThemeSwap";
/* import { ThemeSwap } from "./ThemeSwap"; */
import { Audio } from "../../../_components/Audio";
import { useState } from "react";
/* import { useState } from "react"; */
import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import { Settings } from "./Settings";
export default function Navbar() {
const [isDark, setIsDark] = useState(false);
/* const [isDark, setIsDark] = useState(false);
const toggleTheme = () => {
const newTheme = !isDark;
@@ -17,7 +18,7 @@ export default function Navbar() {
"data-theme",
newTheme ? "nord" : "dark",
);
};
}; */
return (
<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
@@ -32,8 +33,9 @@ export default function Navbar() {
<div className="flex items-center">
<Connection />
</div>
<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
<div className="flex items-center">
<Settings />
<Link
href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
target="_blank"

103
apps/dispatch/app/pilot/_components/navbar/Settings.tsx Normal file
View File

@@ -0,0 +1,103 @@
"use client";
import { useRef } from "react";
import { GearIcon } from "@radix-ui/react-icons";
import { SettingsIcon, Volume2 } from "lucide-react";
export const SettingsBtn = () => {
const modalRef = useRef<HTMLDialogElement>(null);
return (
<div>
<button
className="btn btn-ghost"
onSubmit={() => false}
onClick={() => {
modalRef.current?.showModal();
}}
>
<GearIcon className="w-5 h-5" />
</button>
<dialog ref={modalRef} className="modal">
<div className="modal-box">
<h3 className="flex items-center gap-2 text-lg font-bold mb-5">
<SettingsIcon size={20} /> Einstellungen
</h3>
<div className="flex flex-col items-center justify-center">
<fieldset className="fieldset w-full">
<label className="floating-label w-full text-base">
<span>Eingabegerät</span>
<select className="input w-full" defaultValue={0}>
<option key={0} value={0} disabled>
Bitte wähle ein Eingabegerät...
</option>
<option key={1} value={1}>
Audiogerät 1
</option>
<option key={2} value={2}>
Audiogerät 2
</option>
<option key={3} value={3}>
Audiogerät 3
</option>
</select>
</label>
</fieldset>
{/* FÜGE HIER BITTE DEN MIKROFONAUSSCHLAG EIN WIE IN DER V1 */}
<div className="divider w-full" />
</div>
<p className="flex items-center gap-2 text-base mb-2">
<Volume2 size={20} /> Ausgabelautstärke
</p>
<div className="w-full">
<input
type="range"
min={0}
max={100}
defaultValue={40}
className="range range-xs range-accent w-full"
/>
<div className="flex justify-between px-2.5 mt-2 text-xs">
<span>0</span>
<span>25</span>
<span>50</span>
<span>75</span>
<span>100</span>
</div>
</div>
<div className="flex justify-between modal-action">
<button
className="btn btn-soft"
type="submit"
onSubmit={() => false}
onClick={() => {
modalRef.current?.close();
}}
>
Schließen
</button>
<button
className="btn btn-soft btn-success"
type="submit"
onSubmit={() => false}
onClick={() => {
modalRef.current?.close();
}}
>
Speichern
</button>
</div>
</div>
</dialog>
</div>
);
};
export const Settings = () => {
return (
<div>
<SettingsBtn />
</div>
);
};