74 lines
3.1 KiB
JavaScript
74 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import { User, CreditCard, Car, Calendar, Info } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* Premium Kanban Card
|
|
* Based on the reference image with high-fidelity UI.
|
|
*/
|
|
export const KanbanCard = ({
|
|
title,
|
|
subtitle,
|
|
details = [],
|
|
date,
|
|
statusColor = "emerald",
|
|
className
|
|
}) => {
|
|
return (
|
|
<div className={cn(
|
|
"group relative bg-white dark:bg-[#1a1a1a] border border-slate-200 dark:border-white/5 rounded-xl p-4 shadow-sm hover:shadow-md transition-all duration-300",
|
|
className
|
|
)}>
|
|
{/* Top Right Status Batch Indicator */}
|
|
<div className={cn(
|
|
"absolute top-3 right-3 w-1.5 h-1.5 rounded-full shadow-[0_0_6px_rgba(0,0,0,0.1)]",
|
|
statusColor === 'blue' && "bg-blue-500 shadow-blue-500/40",
|
|
statusColor === 'emerald' && "bg-emerald-500 shadow-emerald-500/40",
|
|
statusColor === 'orange' && "bg-orange-500 shadow-orange-500/40",
|
|
statusColor === 'red' && "bg-red-500 shadow-red-500/40",
|
|
statusColor === 'slate' && "bg-slate-400 shadow-slate-400/40"
|
|
)} />
|
|
|
|
<div className="flex gap-3">
|
|
{/* Avatar Component */}
|
|
<div className="shrink-0 w-10 h-10 bg-slate-100 dark:bg-white/5 rounded-full flex items-center justify-center border border-slate-200/50 dark:border-white/10 group-hover:scale-105 transition-transform duration-300">
|
|
<User size={20} className="text-slate-500 dark:text-slate-400" />
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
{/* Title - Bold Uppercase */}
|
|
<h3 className="text-[11px] font-black text-slate-800 dark:text-slate-100 uppercase tracking-tight leading-tight truncate mb-2">
|
|
{title}
|
|
</h3>
|
|
|
|
{/* Details Grid */}
|
|
<div className="space-y-1.5 mb-3">
|
|
{details.map((detail, idx) => (
|
|
<div key={idx} className="flex items-center gap-2 opacity-80 group-hover:opacity-100 transition-opacity">
|
|
{detail.icon && <detail.icon size={11} className="text-slate-400 shrink-0" />}
|
|
<span className="text-[9px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider truncate">
|
|
{detail.label}: <span className="text-slate-600 dark:text-slate-300">{detail.value}</span>
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="h-[1px] w-full bg-slate-100 dark:bg-white/5 mb-3" />
|
|
|
|
{/* Footer Info */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-1.5">
|
|
<Calendar size={11} className="text-slate-400" />
|
|
<span className="text-[9px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">{date}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<Info size={11} className="text-slate-400" />
|
|
<span className="text-[9px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">Não Informado</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|