optimization

src/components/cards/DeviceCard.tsx

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+import { Settings, Calendar } from 'lucide-react'
+import { DeviceDto } from '@/lib/api'
+
+type DeviceCardProps = {
+    device: DeviceDto
+    href: string
+    className?: string
+}
+
+export function DeviceCard({ device, href, className }: DeviceCardProps) {
+    return (
+        <Link
+            href={href}
+            className={`group bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 p-6 relative ${className || ''}`}
+        >
+            <div className="flex items-start gap-4">
+                <div className="flex-shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
+                    <Settings className="w-7 h-7 text-white" />
+                </div>
+                <div className="flex-1">
+                    <h3 className="text-xl font-semibold text-gray-900 mb-1 group-hover:text-green-600 transition-colors">
+                        {device.deviceName}
+                    </h3>
+                    <p className="text-sm text-gray-500 mb-2">
+                        {device.location || 'بدون موقعیت'}
+                    </p>
+                    <div className="flex items-center gap-2 text-xs text-gray-400">
+                        <span>{device.userName} {device.userFamily}</span>
+                    </div>
+                </div>
+                <div className="flex-shrink-0">
+                    <Calendar className="w-5 h-5 text-gray-400 group-hover:text-green-600 transition-colors" />
+                </div>
+            </div>
+            <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-green-500 to-green-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
+        </Link>
+    )
+}
+