PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Add Chat design

Browse Source
This commit is contained in:
nocnico
2025-03-19 19:43:57 +01:00
parent c66331d367
commit 34fc8bc559
2 changed files with 93 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx
View File

@@ -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>

81
apps/dispatch/app/(dispatch)/_components/navbar/_components/Chat.tsx Normal file
View File

@@ -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>
);
};