From 34fc8bc55944c8175ad00ebdce0c0c74b2b95b03 Mon Sep 17 00:00:00 2001
From: nocnico <nicolas@syntaxdev.de>
Date: Wed, 19 Mar 2025 19:43:57 +0100
Subject: [PATCH] Add Chat design

---
 .../(dispatch)/_components/navbar/Navbar.tsx  | 18 +++--
 .../_components/navbar/_components/Chat.tsx   | 81 +++++++++++++++++++
 2 files changed, 93 insertions(+), 6 deletions(-)
 create mode 100644 apps/dispatch/app/(dispatch)/_components/navbar/_components/Chat.tsx

diff --git a/apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx b/apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx
index 4029a064..bdd617c4 100644
--- a/apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx
+++ b/apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import Link from "next/link";
 import { Connection } from "./_components/Connection";
 import { ThemeSwap } from "./_components/ThemeSwap";
 import { Audio } from "./_components/Audio";
 import { useState } from "react";
 import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
+import { Chat } from "./_components/Chat";
 
 export default function Navbar() {
 	const [isDark, setIsDark] = useState(false);
@@ -20,14 +20,20 @@ export default function Navbar() {
 	};
 
 	return (
-		<div className="navbar bg-base-100 shadow-sm flex gap-5">
-			<div className="flex-1">
+		<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
+			<div className="flex items-center gap-2">
 				<a className="btn btn-ghost text-xl">VAR Leitstelle V2</a>
 			</div>
-			<div className="flex gap-2">
-				<Audio />
+			<div className="bg-base-200 rounded-box flex items-center gap-2 p-1">
+				<div className="flex items-center gap-2">
+					<Chat />
+				</div>
 			</div>
-			<div className="flex gap-5 items-center">
+
+			<div className="flex items-center gap-5">
+				<div className="flex items-center gap-2">
+					<Audio />
+				</div>
 				<div className="flex items-center">
 					<Connection />
 				</div>
diff --git a/apps/dispatch/app/(dispatch)/_components/navbar/_components/Chat.tsx b/apps/dispatch/app/(dispatch)/_components/navbar/_components/Chat.tsx
new file mode 100644
index 00000000..0367cb5d
--- /dev/null
+++ b/apps/dispatch/app/(dispatch)/_components/navbar/_components/Chat.tsx
@@ -0,0 +1,81 @@
+import { ChatBubbleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
+
+export const Chat = () => {
+	return (
+		<div className="dropdown">
+			<div
+				tabIndex={0}
+				role="button"
+				className="btn btn-soft btn-sm btn-primary"
+			>
+				<ChatBubbleIcon className="w-4 h-4" />
+			</div>
+			<div
+				tabIndex={0}
+				className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100]"
+			>
+				<div className="card-body">
+					<div className="join">
+						<select defaultValue="Small" className="select select-sm w-full">
+							<option disabled={true}>Wähle einen Chatpartner...</option>
+							<option>&lt;LST_01&gt; Nicolas Kratsos #VAR0002</option>
+							<option>&lt;CHX31&gt; Vorname Nachname #VAR1010</option>
+							<option>&lt;CHX100&gt; Vorname Nachname #VAR1010</option>
+						</select>
+						<button className="btn btn-sm btn-soft btn-primary join-item">
+							<span className="text-xl">+</span>
+						</button>
+					</div>
+					<div className="tabs tabs-lift">
+						<input
+							type="radio"
+							name="my_tabs_3"
+							className="tab"
+							aria-label="&lt;LST_01&gt;"
+						/>
+						<div className="tab-content bg-base-100 border-base-300 p-6">
+							<div className="chat chat-start">
+								<div className="chat-header">
+									&lt;LST_01&gt; Nicolas Kratsos #VAR0002
+								</div>
+								<div className="chat-bubble">LST v2 ist schon nice</div>
+							</div>
+							<div className="chat chat-end">
+								<div className="chat-bubble">Hast recht.</div>
+							</div>
+						</div>
+
+						<input
+							type="radio"
+							name="my_tabs_3"
+							className="tab"
+							aria-label="&lt;CHX31&gt;"
+							defaultChecked
+						/>
+						<div className="tab-content bg-base-100 border-base-300 p-6">
+							<div className="chat chat-start">
+								<div className="chat-header">
+									&lt;LST_01&gt; Nicolas Kratsos #VAR0002
+								</div>
+								<div className="chat-bubble">get rekt lmao</div>
+							</div>
+							<div className="chat chat-end">
+								<div className="chat-bubble">no u.</div>
+							</div>
+						</div>
+					</div>
+					<div className="join">
+						<div className="w-full">
+							<label className="input validator join-item w-full">
+								<input type="text" required className="w-full" />
+							</label>
+						</div>
+						<button className="btn btn-soft join-item">
+							<PaperPlaneIcon />
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};