105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
"use client";
|
|
import { useLeftMenuStore } from "_store/leftMenuStore";
|
|
import { cn } from "@repo/shared-components";
|
|
import { SettingsIcon } from "lucide-react";
|
|
import { usePilotConnectionStore } from "_store/pilot/connectionStore";
|
|
|
|
export const SettingsBoard = () => {
|
|
const { setSituationTabOpen, situationTabOpen } = useLeftMenuStore();
|
|
const { followOwnAircraft, showOtherAircrafts, showOtherMissions, setMapOptions } =
|
|
usePilotConnectionStore();
|
|
const cross = (
|
|
<svg
|
|
aria-label="disabled"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M18 6 6 18" />
|
|
<path d="m6 6 12 12" />
|
|
</svg>
|
|
);
|
|
const check = (
|
|
<svg aria-label="enabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<g
|
|
strokeLinejoin="round"
|
|
strokeLinecap="round"
|
|
strokeWidth="4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
>
|
|
<path d="M20 6 9 17l-5-5"></path>
|
|
</g>
|
|
</svg>
|
|
);
|
|
|
|
return (
|
|
<div className={cn("dropdown dropdown-top", situationTabOpen && "dropdown-open")}>
|
|
<div className="indicator">
|
|
<button
|
|
className="btn btn-soft btn-sm btn-info"
|
|
onClick={() => {
|
|
setSituationTabOpen(!situationTabOpen);
|
|
}}
|
|
>
|
|
<SettingsIcon size={18} />
|
|
</button>
|
|
</div>
|
|
{situationTabOpen && (
|
|
<div
|
|
tabIndex={0}
|
|
className="dropdown-content card bg-base-200 shadow-md z-[1100] ml-2 border-1 border-info min-w-[300px] max-h-[300px]"
|
|
>
|
|
<div className="card-body flex flex-row gap-4">
|
|
<div className="flex flex-col w-full h-full gap-2">
|
|
<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
|
|
<SettingsIcon size={18} /> Map Einstellungen
|
|
</h2>
|
|
<div className="flex items-center gap-2">
|
|
<label className="toggle text-base-content">
|
|
<input
|
|
type="checkbox"
|
|
checked={followOwnAircraft}
|
|
onChange={(e) => setMapOptions({ followOwnAircraft: e.target.checked })}
|
|
/>
|
|
{cross}
|
|
{check}
|
|
</label>
|
|
Folge mir selbst
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<label className="toggle text-base-content">
|
|
<input
|
|
type="checkbox"
|
|
checked={showOtherAircrafts}
|
|
onChange={(e) => setMapOptions({ showOtherAircrafts: e.target.checked })}
|
|
/>
|
|
{cross}
|
|
{check}
|
|
</label>
|
|
Zeige andere Piloten
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<label className="toggle text-base-content">
|
|
<input
|
|
type="checkbox"
|
|
checked={showOtherMissions}
|
|
onChange={(e) => setMapOptions({ showOtherMissions: e.target.checked })}
|
|
/>
|
|
{cross}
|
|
{check}
|
|
</label>
|
|
Zeige andere Einsätze
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|