25 lines
851 B
TypeScript
25 lines
851 B
TypeScript
import { Card, CardHeader, CardContent } from '@heroui/react';
|
|
import type { ReactNode } from 'react';
|
|
|
|
type Props = {
|
|
title: string;
|
|
subtitle?: string;
|
|
children: ReactNode;
|
|
action?: ReactNode;
|
|
};
|
|
|
|
export function SectionCard({ title, subtitle, children, action }: Props) {
|
|
return (
|
|
<Card className="border border-default-100 bg-gradient-to-b from-default-50/40 to-background">
|
|
<CardHeader className="flex items-start justify-between gap-4 px-6 pt-6 pb-0">
|
|
<div className="min-w-0">
|
|
<h2 className="text-xl font-bold tracking-tight">{title}</h2>
|
|
{subtitle && <p className="mt-1 text-small text-default-500">{subtitle}</p>}
|
|
</div>
|
|
{action && <div className="shrink-0">{action}</div>}
|
|
</CardHeader>
|
|
<CardContent className="px-6 py-5">{children}</CardContent>
|
|
</Card>
|
|
);
|
|
}
|