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.
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Card } from "@/components/ui/card";
|
|
|
|
interface SelectionRailCardProps {
|
|
title: string;
|
|
description?: string;
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
minHeight?: number;
|
|
/** Legacy MUI `sx` passthroughs; retained for API compatibility (no-op). */
|
|
contentSx?: object;
|
|
/** Legacy MUI `sx` passthroughs; retained for API compatibility (no-op). */
|
|
bodySx?: object;
|
|
}
|
|
|
|
/**
|
|
* Selection-rail surface: titled header, scrollable body, optional footer.
|
|
*
|
|
* Preserves the exported props (`minHeight`, `footer`, and the legacy `*Sx`
|
|
* no-op passthroughs) so consuming pages (Actions, Settings) compile
|
|
* unchanged. The scrollable body and footer contract are preserved.
|
|
*/
|
|
export function SelectionRailCard({
|
|
title,
|
|
description,
|
|
children,
|
|
footer,
|
|
minHeight = 420,
|
|
}: SelectionRailCardProps) {
|
|
return (
|
|
<Card className="h-fit self-start py-0" style={{ minHeight }}>
|
|
<div className="flex flex-col" style={{ minHeight }}>
|
|
<div className="border-b bg-muted/50 px-4 py-3">
|
|
<h4 className="text-sm font-semibold tracking-wide">{title}</h4>
|
|
{description ? (
|
|
<p className="text-xs text-muted-foreground">{description}</p>
|
|
) : null}
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto">{children}</div>
|
|
{footer ? <div className="border-t bg-card p-3">{footer}</div> : null}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|