prototype with two windows

2026-03-31 13:35:53 -07:00
parent 7f490b4596
commit 1effd9bb43
14 changed files with 237 additions and 1 deletions
@@ -0,0 +1,47 @@
+import { Mic, MicOff, Video, VideoOff, PhoneOff } from 'lucide-react';
+import { useState } from 'react';
+
+export function HuddleApp() {
+  const [micOn, setMicOn] = useState(true);
+  const [videoOn, setVideoOn] = useState(true);
+
+  const handleLeave = () => {
+    window.electronWindow.closeHuddle();
+  };
+
+  return (
+    <div className="flex h-screen flex-col bg-background text-foreground">
+      {/* Video grid */}
+      <div className="flex flex-1 items-center justify-center gap-4 p-6">
+        <div className="bg-muted flex aspect-video w-full max-w-md items-center justify-center rounded-xl">
+          <span className="text-muted-foreground text-sm">You</span>
+        </div>
+        <div className="bg-muted flex aspect-video w-full max-w-md items-center justify-center rounded-xl">
+          <span className="text-muted-foreground text-sm">Participant</span>
+        </div>
+      </div>
+
+      {/* Controls bar */}
+      <div className="flex items-center justify-center gap-3 border-t px-6 py-4">
+        <button
+          className="rounded-full bg-muted p-3 hover:bg-muted/80 transition-colors"
+          onClick={() => setMicOn(!micOn)}
+        >
+          {micOn ? <Mic className="size-5" /> : <MicOff className="size-5 text-destructive" />}
+        </button>
+        <button
+          className="rounded-full bg-muted p-3 hover:bg-muted/80 transition-colors"
+          onClick={() => setVideoOn(!videoOn)}
+        >
+          {videoOn ? <Video className="size-5" /> : <VideoOff className="size-5 text-destructive" />}
+        </button>
+        <button
+          className="rounded-full bg-destructive p-3 text-destructive-foreground hover:bg-destructive/90 transition-colors"
+          onClick={handleLeave}
+        >
+          <PhoneOff className="size-5" />
+        </button>
+      </div>
+    </div>
+  );
+}