From 1edb99991df7e69ac5cebde88912ee1bf4c4960f Mon Sep 17 00:00:00 2001
From: andrei <andrei@duvakin.ru>
Date: Tue, 8 Oct 2024 11:49:43 +0500
Subject: [PATCH] ._.

---
 src/components/DeliveryOrdersList.css | 7 +++++++
 src/components/DeliveryOrdersList.jsx | 8 ++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/components/DeliveryOrdersList.css b/src/components/DeliveryOrdersList.css
index 1fdce25..f07359f 100644
--- a/src/components/DeliveryOrdersList.css
+++ b/src/components/DeliveryOrdersList.css
@@ -6,4 +6,11 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transform: scale(1.02);
     background-color: #f8f9fa;
+}
+
+.hover-info {
+    color: #007bff;
+    font-size: 0.9em;
+    margin-top: 10px;
+    transition: opacity 0.3s ease;
 }
\ No newline at end of file
diff --git a/src/components/DeliveryOrdersList.jsx b/src/components/DeliveryOrdersList.jsx
index 17d90f5..7a39b20 100644
--- a/src/components/DeliveryOrdersList.jsx
+++ b/src/components/DeliveryOrdersList.jsx
@@ -25,6 +25,7 @@ const DeliveryOrdersList = ({
   const [deliveryOrders, setDeliveryOrders] = useState([]);
   const [loadingDeliveryOrders, setLoadingDeliveryOrders] = useState(true);
   const [calculatingRoutes, setCalculatingRoutes] = useState([]);
+  const [hoveredOrderId, setHoveredOrderId] = useState(null);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -167,6 +168,8 @@ const DeliveryOrdersList = ({
               key={order.id}
               className="card mb-1"
               onClick={() => onSubOrderClick(order.id)}
+              onMouseEnter={() => setHoveredOrderId(order.id)} // Обработчик наведения
+              onMouseLeave={() => setHoveredOrderId(null)} // Обработчик покидания
             >
               <div className="card-body">
                 <p>Этап №{index + 1}</p>
@@ -180,6 +183,11 @@ const DeliveryOrdersList = ({
                     <span className="visually-hidden"></span>
                   </div>
                 )}
+                {hoveredOrderId === order.id && ( 
+                  <p className="hover-info">
+                    Нажмите, чтобы посмотреть подробную информацию
+                  </p>
+                )}
               </div>
             </div>
           ))}