Add Settings to Navbar, disable ThemeSwap (who uses light-mode anyway)
This commit is contained in:
nocnico
@@ -1,14 +1,15 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Connection } from "./_components/Connection";
|
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";
|
import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { SettingsBtn } from "./_components/Settings";
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const [isDark, setIsDark] = useState(false);
|
/* const [isDark, setIsDark] = useState(false);
|
||||||
|
|
||||||
const toggleTheme = () => {
|
const toggleTheme = () => {
|
||||||
const newTheme = !isDark;
|
const newTheme = !isDark;
|
||||||
@@ -17,7 +18,7 @@ export default function Navbar() {
|
|||||||
"data-theme",
|
"data-theme",
|
||||||
newTheme ? "nord" : "dark",
|
newTheme ? "nord" : "dark",
|
||||||
);
|
);
|
||||||
};
|
}; */
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
|
<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">
|
<div className="flex items-center">
|
||||||
<Connection />
|
<Connection />
|
||||||
</div>
|
</div>
|
||||||
<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
|
{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
<SettingsBtn />
|
||||||
<Link
|
<Link
|
||||||
href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
|
href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ export const ConnectionBtn = () => {
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
modalRef.current?.showModal();
|
modalRef.current?.showModal();
|
||||||
}}
|
}}
|
||||||
className="btn btn-soft btn-info"
|
className="btn btn-sm btn-soft btn-info"
|
||||||
>
|
>
|
||||||
{connection.status == "disconnected"
|
{connection.status == "disconnected"
|
||||||
? "Verbinden"
|
? "Verbinden"
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,14 +1,15 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Connection } from "./Connection";
|
import { Connection } from "./Connection";
|
||||||
import { ThemeSwap } from "./ThemeSwap";
|
/* import { ThemeSwap } from "./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";
|
import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { Settings } from "./Settings";
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const [isDark, setIsDark] = useState(false);
|
/* const [isDark, setIsDark] = useState(false);
|
||||||
|
|
||||||
const toggleTheme = () => {
|
const toggleTheme = () => {
|
||||||
const newTheme = !isDark;
|
const newTheme = !isDark;
|
||||||
@@ -17,7 +18,7 @@ export default function Navbar() {
|
|||||||
"data-theme",
|
"data-theme",
|
||||||
newTheme ? "nord" : "dark",
|
newTheme ? "nord" : "dark",
|
||||||
);
|
);
|
||||||
};
|
}; */
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
|
<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">
|
<div className="flex items-center">
|
||||||
<Connection />
|
<Connection />
|
||||||
</div>
|
</div>
|
||||||
<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
|
{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
<Settings />
|
||||||
<Link
|
<Link
|
||||||
href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
|
href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
|||||||
103
apps/dispatch/app/pilot/_components/navbar/Settings.tsx
Normal file
103
apps/dispatch/app/pilot/_components/navbar/Settings.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user