valknarandClaude Sonnet 5
c06f119dcf
The scan/record button row used justify-between, spreading the two button groups to opposite ends instead of sitting next to each other. Also made the record-controls row and each device card's header wrap instead of overflowing on narrow screens. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
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 flex-wrap 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" 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>
|
|
);
|
|
}
|