Added drag and drop widgets, and zone datas

app/src/components/ui/list/DropDownList.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import List from "./List";
 import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
 import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
+import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
 
 interface DropDownListProps {
   value?: string; // Value to display in the DropDownList
@@ -33,6 +34,19 @@ const DropDownList: React.FC<DropDownListProps> = ({
   const handleToggle = () => {
     setIsOpen((prev) => !prev); // Toggle the state
   };
+  const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
+
+  useEffect(() => {
+    async function GetZoneData() {
+      const response = await getZonesApi("hexrfactory")
+      console.log('response: ', response.data);
+      setZoneDataList([{ id: "1", name: "zone1" },
+      { id: "2", name: "Zone 2" },])
+    }
+
+    GetZoneData()
+
+  }, [])
 
   return (
     <div className="dropdown-list-container">
@@ -79,7 +93,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
                 value="Zones"
                 showKebabMenu={false}
                 showAddIcon={false}
-                items={[]}
+                items={zoneDataList}
               />
             </>
           )}