valknarandClaude Sonnet 5
c46adf788f
Cards now sit on an animated signature-gradient background and use a translucent, blurred bp-glass surface so it shines through; extended bp-glass to every stat surface on the Stats page and to its tab switcher. Adds a Breadcrumbs component below the header on all app pages. Also: drop the gradient text fill from the wordmark/heading, animate the BrandMark's heart and curve on the dashboard hero instead of a plain pulse ring, recenter the heart/curve artwork in icon.svg and BrandMark, close the mobile nav menu on link click, remove the redundant "back to recordings" button, and match the "Start session"/"Scan for devices" button sizes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
36 lines
991 B
TypeScript
36 lines
991 B
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Circle, Square } from "lucide-react";
|
|
|
|
interface RecordControlsProps {
|
|
active: boolean;
|
|
elapsedLabel: string;
|
|
disabled: boolean;
|
|
busy: boolean;
|
|
onStart: () => void;
|
|
onEnd: () => void;
|
|
}
|
|
|
|
export function RecordControls({ active, elapsedLabel, disabled, busy, onStart, onEnd }: RecordControlsProps) {
|
|
if (active) {
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<span className="flex items-center gap-2 text-sm font-medium">
|
|
<Circle className="bp-pulse size-2.5 fill-destructive text-destructive" />
|
|
Session live · {elapsedLabel}
|
|
</span>
|
|
<Button variant="outline" size="sm" onClick={onEnd} disabled={busy}>
|
|
<Square className="size-3.5" /> End session
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Button onClick={onStart} disabled={disabled || busy}>
|
|
<Circle className="size-3.5" /> Start session
|
|
</Button>
|
|
);
|
|
}
|