|
1 | | -import { Globe } from 'lucide-react'; |
| 1 | +import { useState } from 'react'; |
| 2 | +import { Globe, RefreshCw, Square, Play, Camera, Code } from 'lucide-react'; |
| 3 | +import { motion } from 'framer-motion'; |
2 | 4 |
|
3 | | -const BrowserPage = () => ( |
4 | | - <div className="flex-1 flex flex-col items-center justify-center text-center p-10"> |
5 | | - <div className="w-16 h-16 bg-white/5 rounded-2xl flex items-center justify-center mb-6 border border-white/10 glass"> |
6 | | - <Globe className="text-primary w-8 h-8" /> |
7 | | - </div> |
8 | | - <h1 className="text-3xl font-bold mb-2">Browser Console</h1> |
9 | | - <p className="text-gray-400 max-w-md"> |
10 | | - Interface de controle do motor @callm/browser (Playwright). Acompanhe a navegação da IA em tempo real. |
11 | | - </p> |
12 | | - <div className="mt-8 w-full max-w-3xl h-64 glass border border-white/10 rounded-2xl flex items-center justify-center text-gray-600 font-mono text-sm"> |
13 | | - [Browser Idle - Aguardando comando da IA] |
| 5 | +const BrowserPage = () => { |
| 6 | + const [url, setUrl] = useState('https://github.com/semezzato/callm-open-runway'); |
| 7 | + const [status, setStatus] = useState('Idle'); |
| 8 | + |
| 9 | + const handleNavigate = () => { |
| 10 | + setStatus('Navigating...'); |
| 11 | + setTimeout(() => setStatus('Connected'), 2000); |
| 12 | + }; |
| 13 | + |
| 14 | + return ( |
| 15 | + <div className="flex flex-col h-full bg-background overflow-hidden"> |
| 16 | + <header className="h-16 border-b border-white/10 flex items-center justify-between px-6 glass z-10 shrink-0"> |
| 17 | + <div className="flex items-center gap-4 flex-1 max-w-2xl text-white"> |
| 18 | + <div className="relative flex-1"> |
| 19 | + <Globe className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" /> |
| 20 | + <input |
| 21 | + type="text" |
| 22 | + value={url} |
| 23 | + onChange={(e) => setUrl(e.target.value)} |
| 24 | + className="w-full bg-white/5 border border-white/10 rounded-xl py-2 pl-10 pr-4 focus:outline-none focus:ring-1 focus:ring-primary text-sm" |
| 25 | + placeholder="https://..." |
| 26 | + /> |
| 27 | + </div> |
| 28 | + <button onClick={handleNavigate} className="p-2 border border-white/10 rounded-xl hover:bg-white/5 text-gray-400"> |
| 29 | + <RefreshCw size={18} className={status === 'Navigating...' ? 'animate-spin' : ''} /> |
| 30 | + </button> |
| 31 | + </div> |
| 32 | + <div className="flex items-center gap-3"> |
| 33 | + <span className={`text-[10px] px-2 py-0.5 rounded-full border flex items-center gap-1.5 ${ |
| 34 | + status === 'Connected' ? 'border-emerald-500/20 text-emerald-400 bg-emerald-500/5' : 'border-white/10 text-gray-400' |
| 35 | + }`}> |
| 36 | + <span className={`w-1.5 h-1.5 rounded-full ${status === 'Connected' ? 'bg-emerald-400 animate-pulse' : 'bg-gray-400'}`} /> |
| 37 | + {status} |
| 38 | + </span> |
| 39 | + <div className="flex items-center gap-1 bg-white/5 p-1 rounded-xl border border-white/10"> |
| 40 | + <button className="p-1.5 hover:bg-white/10 rounded-lg text-gray-400"><Play size={14} /></button> |
| 41 | + <button className="p-1.5 hover:bg-white/10 rounded-lg text-gray-400"><Square size={14} /></button> |
| 42 | + <button className="p-1.5 hover:bg-white/10 rounded-lg text-gray-400"><Camera size={14} /></button> |
| 43 | + <button className="p-1.5 hover:bg-white/10 rounded-lg text-gray-400"><Code size={14} /></button> |
| 44 | + </div> |
| 45 | + </div> |
| 46 | + </header> |
| 47 | + |
| 48 | + <main className="flex-1 p-6 overflow-hidden flex gap-6"> |
| 49 | + {/* Virtual Browser Viewport */} |
| 50 | + <div className="flex-[3] relative rounded-3xl overflow-hidden glass border border-white/10 shadow-2xl group bg-white/5"> |
| 51 | + {status === 'Idle' ? ( |
| 52 | + <div className="absolute inset-0 flex flex-col items-center justify-center space-y-4 text-gray-500"> |
| 53 | + <div className="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center border border-white/5"> |
| 54 | + <Globe size={32} /> |
| 55 | + </div> |
| 56 | + <p className="text-sm font-medium tracking-widest uppercase">Select a URL to start automation</p> |
| 57 | + </div> |
| 58 | + ) : ( |
| 59 | + <div className="w-full h-full flex items-center justify-center p-8"> |
| 60 | + <div className="w-full h-full border border-white/5 rounded-2xl bg-black/40 flex items-center justify-center text-gray-600 animate-pulse"> |
| 61 | + Rendering Browser Stream... |
| 62 | + </div> |
| 63 | + </div> |
| 64 | + )} |
| 65 | + |
| 66 | + <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-black/60 backdrop-blur-xl px-4 py-2 rounded-2xl border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity"> |
| 67 | + <span className="text-[10px] text-gray-400 font-mono">1920x1080 @ 60fps</span> |
| 68 | + </div> |
| 69 | + </div> |
| 70 | + |
| 71 | + {/* DOM / Logs Sidebar */} |
| 72 | + <div className="flex-1 flex flex-col gap-6"> |
| 73 | + <div className="flex-1 glass rounded-3xl border border-white/10 p-5 flex flex-col space-y-4"> |
| 74 | + <h3 className="text-xs font-bold text-gray-500 uppercase tracking-widest">Action Log</h3> |
| 75 | + <div className="flex-1 overflow-y-auto space-y-3 text-[11px] font-mono"> |
| 76 | + <div className="p-2 rounded bg-white/5 border border-white/5 text-blue-400">Initializing Playwright context...</div> |
| 77 | + {status === 'Navigating...' && <div className="p-2 rounded bg-blue-500/10 border border-blue-500/20 text-blue-300">GET {url}</div>} |
| 78 | + {status === 'Connected' && <div className="p-2 rounded bg-emerald-500/10 border border-emerald-500/20 text-emerald-400">Page Content Received</div>} |
| 79 | + </div> |
| 80 | + </div> |
| 81 | + <div className="h-48 glass rounded-3xl border border-white/10 p-5 flex flex-col space-y-4"> |
| 82 | + <h3 className="text-xs font-bold text-gray-500 uppercase tracking-widest">Remote Console</h3> |
| 83 | + <div className="flex-1 bg-black/40 rounded-xl p-3 border border-white/5 font-mono text-[10px] text-emerald-500/70 overflow-y-auto"> |
| 84 | + {"> "} browser context initialized. |
| 85 | + {status === 'Connected' && <><br />{"> "} Page load completed safely.</>} |
| 86 | + </div> |
| 87 | + </div> |
| 88 | + </div> |
| 89 | + </main> |
14 | 90 | </div> |
15 | | - </div> |
16 | | -); |
| 91 | + ); |
| 92 | +}; |
17 | 93 |
|
18 | 94 | export default BrowserPage; |
0 commit comments