- added modal for developer options

src/components/UI/Footer.tsx

@@ -1,13 +1,25 @@
+import { useState } from "react";
+import { useGetVersions } from "../../hooks/useGetVersions";
 import Logo from "/MAV.svg";
+import VersionsModal from "./VersionsModal";
 
 const Footer = () => {
+  const { versionsQuery } = useGetVersions();
+  const [isDevModalOpen, setDevModalOpen] = useState(false);
+
+  const versionsData = versionsQuery?.data;
+
+  const handleClick = () => {
+    setDevModalOpen(true);
+  };
   return (
-    <footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
-      <img src={Logo} alt="Logo" width={100} height={100} />
-      <p className="text-sm">
-        {new Date().getFullYear()} MAV Systems &copy; All rights reserved.
-      </p>
-    </footer>
+    <>
+      <footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
+        <img src={Logo} alt="Logo" width={100} height={100} onClick={handleClick} />
+        <p className="text-sm">{new Date().getFullYear()} MAV Systems &copy; All rights reserved.</p>
+      </footer>
+      <VersionsModal isDevModalOpen={isDevModalOpen} handleClose={() => setDevModalOpen(false)} data={versionsData} />
+    </>
   );
 };