Add grid legend

src/modules/Sidebar/Legend.jsx

@@ -15,14 +15,42 @@ export function Legend() {
       <div className="space-y-5">
         <Title text={"Легенда"} className={"mb-1"} />
 
+        <div className="flex  gap-1 items-center justify-between">
+          <span className="text-sm">Тепловая карта</span>
+
+          <div className="flex">
+            <div
+              className="w-5 h-5 relative"
+              style={{ background: "rgb(204,34,34)" }}
+            >
+              <span className="absolute top-5 left-1">0</span>
+            </div>
+            <div
+              className="w-5 h-5 relative"
+              style={{ background: "rgb(255,221,52)" }}
+            >
+              <span className="absolute top-5 left-1">25</span>
+            </div>
+            <div
+              className="w-5 h-5 relative"
+              style={{ background: "rgb(30,131,42)" }}
+            >
+              <span className="absolute top-5 left-1">40</span>
+            </div>
+          </div>
+        </div>
+
         {types.map((type) => (
-          <div className="flex gap-1 items-center" key={type.id}>
+          <div
+            className="flex gap-1 items-center justify-between"
+            key={type.id}
+          >
+            <span className="text-sm">{type.name}</span>
+
             <span
               className="rounded-xl w-3 h-3 inline-block"
               style={{ backgroundColor: type.color }}
             ></span>
-
-            <span className="text-sm">{type.name}</span>
           </div>
         ))}
       </div>