63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { FileText, FileSpreadsheet } from 'lucide-react'
|
|
|
|
interface ReportCardProps {
|
|
title: string
|
|
description: string
|
|
onExportPdf: () => void
|
|
onExportExcel: () => void
|
|
loading?: boolean
|
|
}
|
|
|
|
export default function ReportCard({
|
|
title,
|
|
description,
|
|
onExportPdf,
|
|
onExportExcel,
|
|
loading = false,
|
|
}: ReportCardProps) {
|
|
const btnBase =
|
|
'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50'
|
|
const btnPrimary =
|
|
'bg-cyan-600 text-white hover:bg-cyan-500'
|
|
const btnOutlined =
|
|
'border border-white/10 text-gray-300 hover:bg-white/5 hover:text-gray-200'
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'rounded-xl border border-white/10 overflow-hidden',
|
|
'bg-gradient-to-b from-dark-300/90 to-dark-400/90',
|
|
'flex flex-col'
|
|
)}
|
|
>
|
|
<div className="border-b border-white/10 px-4 py-4">
|
|
<h3 className="text-lg font-semibold text-white">{title}</h3>
|
|
<p className="mt-2 text-sm text-gray-400">{description}</p>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2 p-4">
|
|
<button
|
|
type="button"
|
|
onClick={onExportPdf}
|
|
disabled={loading}
|
|
className={cn(btnBase, btnPrimary)}
|
|
>
|
|
<FileText className="h-4 w-4" />
|
|
Exportar PDF
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onExportExcel}
|
|
disabled={loading}
|
|
className={cn(btnBase, btnOutlined)}
|
|
>
|
|
<FileSpreadsheet className="h-4 w-4" />
|
|
Excel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|