front/dev

FRONT/DEV/src/components/UI/signalSvg.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from 'react';
+
+interface SignalSVGProps {
+  signal: number; // Принимаем signal как пропс
+  color: string;
+  size: string;
+}
+
+const SignalSVG: React.FC<SignalSVGProps> = ({ signal, color, size }) => {
+  const svgRef = useRef<SVGSVGElement | null>(null);
+
+  useEffect(() => {
+    // Устанавливаем цвета в зависимости от signal
+    const colors = {
+        '--st1-color': signal >= 1 ? color : 'black',
+        '--st2-color': signal >= 2 ? color : 'black',
+        '--st3-color': signal >= 3 ? color : 'black',
+        '--st4-color': signal >= 4 ? color : 'black',
+        '--st5-color': signal === 5 ? color : 'black',
+      };
+
+    // Применяем стили к SVG
+    if (svgRef.current) {
+      Object.entries(colors).forEach(([key, value]) => {
+        svgRef.current?.style.setProperty(key, value);
+      });
+    }
+  }, [signal]);
+
+  return (
+    <svg
+      ref={svgRef}
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      viewBox="0 0 296 235"
+      xmlSpace="preserve"
+      width={size} // Фиксированная ширина
+        height={size}
+    >
+      <style type="text/css">
+        {`
+          .st1 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st1-color, white); }
+          .st2 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st2-color, white); }
+          .st3 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st3-color, white); }
+          .st4 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st4-color, white); }
+          .st5 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st5-color, white); }
+        `}
+      </style>
+      <g>
+        <polygon className="st1" points="47,138 47,188 0,188 0,164" />
+        <polygon className="st2" points="109,104 109,188 62,188 62,130" />
+        <polygon className="st3" points="171,69 171,188 124,188 124,95" />
+        <polygon className="st4" points="234,35 234,188 187,188 187,61" />
+        <polygon className="st5" points="296,0 296,188 249,188 249,26" />
+      </g>
+    </svg>
+  );
+};
+
+export default SignalSVG;