Map Einstellungen für Piloten

apps/dispatch/app/_components/left/SettingsBoard.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { useLeftMenuStore } from "_store/leftMenuStore";
+import { cn } from "@repo/shared-components";
+import { SettingsIcon } from "lucide-react";
+
+export const SettingsBoard = () => {
+	const { setSituationTabOpen, situationTabOpen } = useLeftMenuStore();
+
+	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" />
+									{cross}
+									{check}
+								</label>
+								Folge mir selbst
+							</div>
+							<div className="flex items-center gap-2">
+								<label className="toggle text-base-content">
+									<input type="checkbox" />
+									{cross}
+									{check}
+								</label>
+								Zeige andere Piloten
+							</div>
+							<div className="flex items-center gap-2">
+								<label className="toggle text-base-content">
+									<input type="checkbox" />
+									{cross}
+									{check}
+								</label>
+								Zeige andere Einsätze
+							</div>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};