Consult AS Technology
599dce2629
Del look editorial (verde #1B4332, esquinas a 0, botones en mayusculas) al sistema NovaSpark: primario azul #2563EB, detalle naranja #F97316, fondo #F8FAFC con tarjetas blancas rounded-xl + shadow-sm, chips rounded-full semanticos, focus ring azul, transiciones 100-200ms. Incluye headers de tabla en los PDFs (cotizador y estado de cuenta).
12 lines
561 B
TypeScript
12 lines
561 B
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
export default function KpiCard({ titulo, valor, detalle }: { titulo: string; valor: ReactNode; detalle?: string }) {
|
|
return (
|
|
<div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm transition-shadow duration-200 hover:shadow-md">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{titulo}</p>
|
|
<p className="mt-2 text-3xl font-semibold text-[#111827]">{valor}</p>
|
|
{detalle && <p className="mt-2 text-xs text-[#64748B]">{detalle}</p>}
|
|
</div>
|
|
)
|
|
}
|