Denozordec
4a70cf5854
Build, Test, and Push CFDM Docker Image / test (push) Has been cancelled
Build, Test, and Push CFDM Docker Image / build-and-push (push) Has been cancelled
Build, Test, and Push CFDM Docker Image / create-release (push) Has been cancelled
Build, Test, and Push CFDM Docker Image / update-wiki (push) Has been cancelled
58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import { InboxIcon, type LucideIcon } from 'lucide-react'
|
|
import { EmptyState } from '@/components/empty-state'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@cfdm/ui/components/card'
|
|
|
|
interface DataTableCardProps {
|
|
title: string
|
|
description?: string
|
|
children: React.ReactNode
|
|
toolbar?: React.ReactNode
|
|
emptyTitle?: string
|
|
emptyDescription?: string
|
|
emptyIcon?: LucideIcon
|
|
emptyAction?: React.ReactNode
|
|
isEmpty?: boolean
|
|
}
|
|
|
|
export function DataTableCard({
|
|
title,
|
|
description,
|
|
children,
|
|
toolbar,
|
|
emptyTitle,
|
|
emptyDescription,
|
|
emptyIcon: EmptyIcon = InboxIcon,
|
|
emptyAction,
|
|
isEmpty,
|
|
}: DataTableCardProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{title}</CardTitle>
|
|
{description && <CardDescription>{description}</CardDescription>}
|
|
</CardHeader>
|
|
{toolbar && !isEmpty && (
|
|
<div className="flex items-center gap-2 px-6 pb-4">{toolbar}</div>
|
|
)}
|
|
<CardContent className="p-0">
|
|
{isEmpty && emptyTitle ? (
|
|
<EmptyState
|
|
icon={EmptyIcon}
|
|
title={emptyTitle}
|
|
description={emptyDescription}
|
|
action={emptyAction}
|
|
/>
|
|
) : (
|
|
children
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|