39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import type { QuickConnectionItem, QuickConnectionStatus } from '@/mocks/dashboardData'
|
|
|
|
interface QuickConnectionCardProps {
|
|
item: QuickConnectionItem
|
|
onClick?: (id: string) => void
|
|
}
|
|
|
|
const statusConfig: Record<
|
|
QuickConnectionStatus,
|
|
{ dot: string; label: string; text: string }
|
|
> = {
|
|
online: { dot: 'bg-success', label: 'En línea', text: 'text-success' },
|
|
advertencia: { dot: 'bg-warning', label: 'Advertencia', text: 'text-warning' },
|
|
offline: { dot: 'bg-gray-500', label: 'Fuera de línea', text: 'text-gray-500' },
|
|
}
|
|
|
|
export default function QuickConnectionCard({ item, onClick }: QuickConnectionCardProps) {
|
|
const config = statusConfig[item.status]
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onClick?.(item.id)}
|
|
className={cn(
|
|
'card p-4 text-left transition-all hover:scale-[1.02] hover:border-primary-500/50',
|
|
'flex items-center justify-between gap-3'
|
|
)}
|
|
>
|
|
<span className="font-medium text-gray-200 truncate">{item.name}</span>
|
|
<span className={cn('inline-flex items-center gap-1.5 text-sm shrink-0', config.text)}>
|
|
<span className={cn('h-2 w-2 rounded-full', config.dot)} />
|
|
{config.label}
|
|
</span>
|
|
</button>
|
|
)
|
|
}
|