Developer
109e74db41
Web UI rework. Shared-components slice (drift prevention): - Migrate SectionCard, SelectionRailCard, TabbedCard, MetricCard, DiskSpaceCard, HoverEditButton, DialogFooter, ConfirmDialog, LibraryOverview, NowPlaying, SessionActivityPanel off @mui - HoverEditButton: MUI IconButton + EditOutlined -> Button + lucide Pencil - Status mapping uses the success Badge variant (chart-2) for healthy - Exported APIs preserved so consuming pages still compile (no page edits) - 11 behavioral Vitest component tests added Gate: build + lint + test green.
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
|
import type { LibraryCount } from "../types";
|
|
|
|
interface Props {
|
|
libraries: LibraryCount[];
|
|
}
|
|
|
|
/**
|
|
* Two-column overview of movie and TV libraries on a responsive CSS grid
|
|
* (`grid grid-cols-1 md:grid-cols-2 gap-4`). Same exported props as the MUI
|
|
* version; the per-library counts render verbatim.
|
|
*/
|
|
export function LibraryOverview({ libraries }: Props) {
|
|
const movieLibs = libraries.filter((l) => l.type === "movies");
|
|
const tvLibs = libraries.filter((l) => l.type === "tvshows");
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div className="flex flex-col gap-4">
|
|
<h4 className="text-sm font-semibold text-muted-foreground">
|
|
Movie libraries
|
|
</h4>
|
|
<div className="flex flex-col gap-4">
|
|
{movieLibs.map((lib) => (
|
|
<Card key={lib.library}>
|
|
<CardContent className="flex flex-col gap-1">
|
|
<span className="text-base font-semibold">{lib.library}</span>
|
|
<span className="text-sm text-muted-foreground">
|
|
Total: {lib.total.toLocaleString()} | Movies:{" "}
|
|
{lib.movies.toLocaleString()}
|
|
</span>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<h4 className="text-sm font-semibold text-muted-foreground">
|
|
TV libraries
|
|
</h4>
|
|
<div className="flex flex-col gap-4">
|
|
{tvLibs.map((lib) => (
|
|
<Card key={lib.library}>
|
|
<CardContent className="flex flex-col gap-1">
|
|
<span className="text-base font-semibold">{lib.library}</span>
|
|
<span className="text-sm text-muted-foreground">
|
|
Total: {lib.total.toLocaleString()} | Series:{" "}
|
|
{lib.series.toLocaleString()}
|
|
</span>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|