alireza
9da69c96b1
Some checks failed
Deploy MyApp on Same Server / build-and-deploy (push) Has been cancelled
- Replace custom page layout with AppShell component for consistent UI - Remove unused PageHeader and UpdateAlertConditionDto imports - Update service worker cache names and version.json to new timestamp
75 lines
3.8 KiB
TypeScript
75 lines
3.8 KiB
TypeScript
import Link from 'next/link'
|
|
import { Settings, Calendar } from 'lucide-react'
|
|
import { DeviceDto } from '@/lib/api'
|
|
|
|
type DeviceCardProps = {
|
|
device: DeviceDto
|
|
href?: string
|
|
onClick?: () => void
|
|
className?: string
|
|
}
|
|
|
|
export function DeviceCard({ device, href, onClick, className }: DeviceCardProps) {
|
|
if (onClick) {
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClick(); }}
|
|
className={`group bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 p-6 relative cursor-pointer ${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" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|
|
|