Commit
upgrade live debate window with address bar and progress
commit
304b6ae
1 changed file with +19 and −7
modified src/components/landing-hero.tsx +19 −7
| @@ -8,6 +8,7 @@import { DebateConsole } from '@/components/debate/debate-console'; | ||
| 8 | 8 | import { Button } from '@/components/ui/button'; |
| 9 | 9 | import type { DebateResult } from '@/core/types'; |
| 10 | 10 | import { useDebatePlayback } from '@/hooks/use-debate-playback'; |
| 11 | +import { truncate } from '@/lib/utils'; | |
| 11 | 12 | |
| 12 | 13 | /** |
| 13 | 14 | * The landing hero: a real recorded debate auto-plays and loops, front and |
| @@ -16,7 +17,7 @@import { useDebatePlayback } from '@/hooks/use-debate-playback'; | ||
| 16 | 17 | * page stays tight while the debate animates. |
| 17 | 18 | */ |
| 18 | 19 | export function LandingHero({ result }: { result: DebateResult }) { |
| 19 | - const { view, state, play, restart, setSpeed } = useDebatePlayback(result); | |
| 20 | + const { view, state, progress, play, restart, setSpeed } = useDebatePlayback(result); | |
| 20 | 21 | |
| 21 | 22 | // Autoplay a little faster than a real debate so the loop stays lively. |
| 22 | 23 | useEffect(() => { |
| @@ -77,16 +78,27 @@export function LandingHero({ result }: { result: DebateResult }) { | ||
| 77 | 78 | |
| 78 | 79 | <div className="reveal relative mx-auto max-w-5xl" style={{ animationDelay: '400ms' }}> |
| 79 | 80 | <div className="pointer-events-none absolute -inset-x-4 -top-4 bottom-4 -z-10 rounded-[2.5rem] bg-primary/[0.07] blur-3xl" /> |
| 80 | - <div className="relative overflow-hidden rounded-2xl border bg-card shadow-2xl"> | |
| 81 | - <div className="flex items-center gap-3 border-b px-4 py-2.5"> | |
| 82 | - <span className="flex gap-1.5"> | |
| 81 | + <div className="relative overflow-hidden rounded-2xl border bg-card shadow-2xl ring-1 ring-black/5 dark:ring-white/10"> | |
| 82 | + <div className="absolute inset-x-0 top-0 z-20 h-0.5 bg-transparent"> | |
| 83 | + <div | |
| 84 | + className="h-full bg-gradient-to-r from-primary to-violet-400 transition-all duration-300" | |
| 85 | + style={{ width: `${progress}%` }} | |
| 86 | + /> | |
| 87 | + </div> | |
| 88 | + <div className="flex items-center gap-3 border-b bg-muted/30 px-4 py-2.5"> | |
| 89 | + <span className="flex shrink-0 gap-1.5"> | |
| 83 | 90 | <span className="h-2.5 w-2.5 rounded-full bg-red-400/70" /> |
| 84 | 91 | <span className="h-2.5 w-2.5 rounded-full bg-amber-400/70" /> |
| 85 | 92 | <span className="h-2.5 w-2.5 rounded-full bg-emerald-400/70" /> |
| 86 | 93 | </span> |
| 87 | - <span className="flex items-center gap-1.5 text-xs text-muted-foreground"> | |
| 88 | - <span className="h-2 w-2 animate-pulse-subtle rounded-full bg-emerald-500" /> | |
| 89 | - replaying a real debate | |
| 94 | + <div className="mx-auto hidden max-w-md flex-1 items-center justify-center rounded-md bg-background/60 px-3 py-1 sm:flex"> | |
| 95 | + <span className="truncate font-mono text-[11px] text-muted-foreground"> | |
| 96 | + {truncate(view.question || result.config.question, 64)} | |
| 97 | + </span> | |
| 98 | + </div> | |
| 99 | + <span className="ml-auto flex shrink-0 items-center gap-1.5 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-500 sm:ml-0"> | |
| 100 | + <span className="h-1.5 w-1.5 animate-pulse-subtle rounded-full bg-emerald-500" /> | |
| 101 | + live | |
| 90 | 102 | </span> |
| 91 | 103 | </div> |
| 92 | 104 |