Разработка интерфейса фронт

frontend/components/navigation/Monitoring.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface MonitoringProps {
+  objectId?: string;
+  onClose?: () => void;
+}
+
+const Monitoring: React.FC<MonitoringProps> = ({ onClose }) => {
+  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">
+            <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={(e) => {
+                const target = e.target as HTMLImageElement;
+                target.style.display = 'none';
+              }}
+            />
+          </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;