added react frontend

static/frontend/src/App.jsx

@@ -2,14 +2,15 @@ import { useState, useEffect } from 'react'
 import './App.css'
 
 
+
 const TextTile = ({ label }) => (
   <div className="tile-content">
     <span className="text-purple-400 text-lg font-semibold">{label}</span>
   </div>
 );
 
-const ImageTile = ({ imageUrl, label }) => (
+const ImageTile = ({ imageUrl, label, enabled, toggleEnabled }) => (
-    <div className="tile-content">
+  <div className="tile-content cursor-pointer" onClick={toggleEnabled}>
     <img src={imageUrl} className="rounded-lg w-[6.3rem] h-[6.3rem] object-cover" alt={label} />
     <span className="text-purple-400 text-lg font-semibold">{label}</span>
   </div>
@@ -96,9 +97,9 @@ const App = () => {
   const [tiles, setTiles] = useState([
     { id: 1, type: "text", label: "Tile 1" },
     { id: 2, type: "gauge", gauges: [{ value: 75, label: "Metric 1" }, { value: 120, label: "Metric 2" }] },
-        { id: 3, type: "image", imageUrl: "https://cloud.viadev.su/storage/branding_media/d076be24-e369-41ca-9b24-5f94efc5ecfd.png", label: "Image 1" },
+    { id: 3, type: "image", imageUrl: "https://cloud.viadev.su/storage/branding_media/d076be24-e369-41ca-9b24-5f94efc5ecfd.png", label: "Image 1", enabled: true },
     { id: 4, type: "text", label: "Tile 4" },
-        { id: 5, type: "image", imageUrl: "https://cloud.viadev.su/storage/branding_media/d076be24-e369-41ca-9b24-5f94efc5ecfd.png", label: "Image 2" },
+    { id: 5, type: "image", imageUrl: "https://cloud.viadev.su/storage/branding_media/d076be24-e369-41ca-9b24-5f94efc5ecfd.png", label: "Image 2", enabled: true },
     { id: 6, type: "clock" },
     { id: 7, type: "slider", sliders: [{ value: 50, label: "Slider 1" }, { value: 75, label: "Slider 2" }] },
     { id: 8, type: "text", label: "Tile 5 (Double)" },
@@ -149,16 +150,34 @@ const App = () => {
     );
   };
 
+  const toggleImageEnabled = (tileId) => {
+    setTiles(prevTiles =>
+      prevTiles.map(tile => {
+        if (tile.id === tileId && tile.type === "image") {
+          return { ...tile, enabled: !tile.enabled };
+        }
+        return tile;
+      })
+    );
+  };
+
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-wrap gap-4">
         {tiles.map(tile => (
           <div
             key={tile.id}
-                        className={`glass rounded-lg ${tile.type === "gauge" || tile.type === "slider" || tile.type === "clock" ? "w-96 h-48" : "w-48 h-48"} relative`}
+            className={`glass rounded-lg ${tile.type === "gauge" || tile.type === "slider" || tile.type === "clock" ? "w-96 h-48" : "w-48 h-48"} relative ${tile.type === "image" && tile.enabled ? "glass_enabled" : ""}`}
           >
             {tile.type === "text" && <TextTile label={tile.label} />}
-                        {tile.type === "image" && <ImageTile imageUrl={tile.imageUrl} label={tile.label} />}
+            {tile.type === "image" && (
+              <ImageTile
+                imageUrl={tile.imageUrl}
+                label={tile.label}
+                enabled={tile.enabled}
+                toggleEnabled={() => toggleImageEnabled(tile.id)}
+              />
+            )}
             {tile.type === "clock" && <ClockTile id={tile.id} />}
             {tile.type === "gauge" && <GaugeTile gauges={tile.gauges} />}
             {tile.type === "slider" && <SliderTile sliders={tile.sliders} tileId={tile.id} updateSliderValue={updateSliderValue} />}
@@ -199,5 +218,4 @@ const App = () => {
     </div>
   );
 };
-
 export default App