soconnor
86f8987dff
git-subtree-dir: apps/web git-subtree-mainline:068a51b46bgit-subtree-split:1e7174fa60
60 lines
1.2 KiB
TypeScript
60 lines
1.2 KiB
TypeScript
import { cn } from "~/lib/utils";
|
|
|
|
/** Vertical rhythm for dashboard pages — use with shell `gap-5`. */
|
|
export const dashboardGapClass = "gap-5 md:gap-6";
|
|
|
|
/** Standard grid gap for dashboard cards and sections. */
|
|
export const dashboardGridClass =
|
|
"grid gap-5 md:gap-6";
|
|
|
|
/** Summary stat cards (2-up mobile, 4-up desktop). */
|
|
export const dashboardStatGridClass =
|
|
"grid grid-cols-2 gap-4 sm:grid-cols-4";
|
|
|
|
export function DashboardPage({
|
|
children,
|
|
className,
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"page-enter mx-auto flex w-full max-w-7xl flex-col",
|
|
dashboardGapClass,
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function DashboardGrid({
|
|
children,
|
|
className,
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<div className={cn(dashboardGridClass, className)}>{children}</div>
|
|
);
|
|
}
|
|
|
|
export function DashboardCardTitle({
|
|
children,
|
|
icon: Icon,
|
|
}: {
|
|
children: React.ReactNode;
|
|
icon?: React.ComponentType<{ className?: string }>;
|
|
}) {
|
|
return (
|
|
<span className="flex items-center gap-2">
|
|
{Icon ? <Icon className="text-muted-foreground h-4 w-4" /> : null}
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|