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>
66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
|
|
export interface RecordingLibrarySummary {
|
|
count: number;
|
|
avgDurationMs: number;
|
|
totalPlayCount: number;
|
|
list: { id: number; name: string; durationMs: number; playCount: number; lastPlayedAt: number | null }[];
|
|
}
|
|
|
|
export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummary }) {
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
|
<Card className="bp-glass">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm text-muted-foreground">Recordings</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="bp-readout text-3xl">{stats.count}</CardContent>
|
|
</Card>
|
|
<Card className="bp-glass">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm text-muted-foreground">Avg length</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="bp-readout text-3xl">
|
|
{Math.round(stats.avgDurationMs / 1000)}s
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bp-glass">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm text-muted-foreground">Total plays</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="bp-readout text-3xl">{stats.totalPlayCount}</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{stats.list.length > 0 && (
|
|
<Card className="bp-glass">
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Recording</TableHead>
|
|
<TableHead>Plays</TableHead>
|
|
<TableHead>Last played</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{stats.list.map((r) => (
|
|
<TableRow key={r.id}>
|
|
<TableCell className="font-medium">{r.name}</TableCell>
|
|
<TableCell className="bp-readout">{r.playCount}</TableCell>
|
|
<TableCell className="bp-readout text-muted-foreground">
|
|
{r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|