74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { ShieldCheck, Signal, Smartphone, Trash2 } from 'lucide-react'
|
||
import type { Device } from '../../types'
|
||
import { conditionText, connectionText, getStatusClass } from '../../types'
|
||
|
||
type DeviceMainCardProps = {
|
||
device: Device
|
||
}
|
||
|
||
export function DeviceMainCard({ device }: DeviceMainCardProps) {
|
||
return (
|
||
<div className="device-card device-card--main">
|
||
<div className="device-main">
|
||
<div className="device-main__image">
|
||
{device.image ? (
|
||
<img src={device.image} alt={device.model ?? 'Устройство'} />
|
||
) : (
|
||
<Smartphone size={84} />
|
||
)}
|
||
</div>
|
||
|
||
<div className="device-main__info">
|
||
<h2>{device.model ?? '-'}</h2>
|
||
|
||
<p>{device.factoryNumber}</p>
|
||
<p>
|
||
{device.imei}
|
||
{device.serialNumber ? ` · ${device.serialNumber}` : ''}
|
||
</p>
|
||
|
||
<div className="device-main__divider" />
|
||
|
||
<div className="device-main__statuses">
|
||
<div className={`device-status ${getStatusClass(device.condition)}`}>
|
||
<ShieldCheck size={17} />
|
||
{conditionText[device.condition]}
|
||
</div>
|
||
|
||
<div className={`device-status ${getStatusClass(device.connection)}`}>
|
||
<Signal size={17} />
|
||
{device.connectionText ?? connectionText[device.connection]}
|
||
</div>
|
||
|
||
{device.workTime && (
|
||
<div className="device-status is-muted">
|
||
<Smartphone size={17} />
|
||
В работе: {device.workTime}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="device-main__bottom">
|
||
<div className="device-registered">
|
||
<Smartphone size={17} />
|
||
<div className="device-registered-info">
|
||
<span>Зарегистрирован</span>
|
||
<b>{device.registeredAt ?? '10:00 20.04.2026'}</b>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="device-card__actions">
|
||
<button className="device-history-btn" type="button">
|
||
Подробная история эксплуатации
|
||
</button>
|
||
|
||
<button className="device-delete-btn" type="button" aria-label="Удалить">
|
||
<Trash2 size={18} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
} |