79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
import React, { useState } from 'react';
|
||
import Image from 'next/image';
|
||
|
||
interface MonitoringProps {
|
||
objectId?: string;
|
||
onClose?: () => void;
|
||
}
|
||
|
||
const Monitoring: React.FC<MonitoringProps> = ({ onClose }) => {
|
||
const [objectImageError, setObjectImageError] = useState(false);
|
||
|
||
return (
|
||
<div className="w-full">
|
||
<div className="bg-[rgb(22,24,36)] rounded-[12px] p-4 space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-white text-2xl font-semibold">Зоны мониторинга</h2>
|
||
{onClose && (
|
||
<button
|
||
onClick={onClose}
|
||
className="text-white hover:text-gray-300 transition-colors"
|
||
>
|
||
<svg className="w-6 h-6" 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 className="bg-[rgb(158,168,183)] rounded-lg p-3 h-[200px] flex items-center justify-center">
|
||
<div className="w-full h-full bg-gray-300 rounded flex items-center justify-center">
|
||
{objectImageError ? (
|
||
<div className="text-center p-4">
|
||
<div className="text-gray-600 text-sm font-semibold mb-2">
|
||
Предпросмотр 3D недоступен
|
||
</div>
|
||
<div className="text-gray-500 text-xs">
|
||
Изображение модели не найдено
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<Image
|
||
src="/images/test_image.png"
|
||
alt="Object Model"
|
||
width={200}
|
||
height={200}
|
||
className="max-w-full max-h-full object-contain"
|
||
style={{ height: 'auto' }}
|
||
onError={() => setObjectImageError(true)}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{[1, 2, 3, 4, 5, 6].map((zone) => (
|
||
<div key={zone} className="flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center">
|
||
<div className="w-full h-full bg-gray-200 rounded flex items-center justify-center">
|
||
<Image
|
||
src="/images/test_image.png"
|
||
alt={`Зона ${zone}`}
|
||
width={120}
|
||
height={120}
|
||
className="max-w-full max-h-full object-contain opacity-50"
|
||
style={{ height: 'auto' }}
|
||
onError={(e) => {
|
||
const target = e.target as HTMLImageElement;
|
||
target.style.display = 'none';
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Monitoring; |