95 lines
4.2 KiB
TypeScript
95 lines
4.2 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
|
||
interface DetectorType {
|
||
detector_id: number
|
||
name: string
|
||
object: string
|
||
status: string
|
||
checked: boolean
|
||
type: string
|
||
location: string
|
||
floor: number
|
||
}
|
||
|
||
interface DetectorMenuProps {
|
||
detector: DetectorType
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
getStatusText: (status: string) => string
|
||
}
|
||
|
||
const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose, getStatusText }) => {
|
||
if (!isOpen) return null
|
||
|
||
return (
|
||
<div className="absolute left-[500px] top-0 bg-[#161824] border-r border-gray-700 z-30 w-[454px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
|
||
<div className="h-full overflow-auto p-5">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="text-white text-lg font-medium">
|
||
Датч.{detector.name}
|
||
</h3>
|
||
<div className="flex items-center gap-2">
|
||
<button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
</svg>
|
||
Отчет
|
||
</button>
|
||
<button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
История
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Таблица детекторов */}
|
||
<div className="space-y-0 border border-[rgb(30,31,36)] rounded-lg overflow-hidden">
|
||
<div className="flex">
|
||
<div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
|
||
<div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Маркировка по проекту</div>
|
||
<div className="text-white text-sm">{detector.name}</div>
|
||
</div>
|
||
<div className="flex-1 p-4">
|
||
<div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Тип детектора</div>
|
||
<div className="text-white text-sm">{detector.type}</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex border-t border-[rgb(30,31,36)]">
|
||
<div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
|
||
<div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Местоположение</div>
|
||
<div className="text-white text-sm">{detector.location}</div>
|
||
</div>
|
||
<div className="flex-1 p-4">
|
||
<div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Статус</div>
|
||
<div className="text-white text-sm">{getStatusText(detector.status)}</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex border-t border-[rgb(30,31,36)]">
|
||
<div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
|
||
<div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Временная метка</div>
|
||
<div className="text-white text-sm">Сегодня, 14:30</div>
|
||
</div>
|
||
<div className="flex-1 p-4">
|
||
<div className="text-white text-sm text-right">Вчера</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
onClick={onClose}
|
||
className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default DetectorMenu |