Dashboard design improved

src/components/dashboard/QuickConnectionCard.tsx

@@ -0,0 +1,38 @@
+'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>
+  )
+}