Situation Board WIP #28

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

@@ -0,0 +1,45 @@
+"use client";
+import { useLeftMenuStore } from "_store/leftMenuStore";
+import { useSession } from "next-auth/react";
+import { cn } from "_helpers/cn";
+import { ListCollapse, Plane } from "lucide-react";
+
+export const SituationBoard = () => {
+	const { setSituationTabOpen, situationTabOpen } = useLeftMenuStore();
+	const session = useSession();
+
+	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);
+					}}
+				>
+					<ListCollapse className="w-4 h-4" />
+				</button>
+			</div>
+			{situationTabOpen && (
+				<div
+					tabIndex={0}
+					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-info"
+				>
+					<div className="card-body flex flex-row gap-4">
+						<div className="flex-1">
+							<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
+								<ListCollapse /> Einsatzliste
+							</h2>
+						</div>
+						<div className="w-px bg-gray-400 mx-2" />
+						<div className="flex-1">
+							<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
+								<Plane /> Stations
+							</h2>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};