Explorer pages: Update Sorting, Filtering and Images

components/NodesData.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef } from "react"; 
 import axios from "axios";
+import { FilterOutlined, SortAscendingOutlined } from '@ant-design/icons';
 import Cookies from "js-cookie";
 
 const EREBRUS_GATEWAY_URL = process.env.NEXT_PUBLIC_EREBRUS_BASE_URL;
@@ -17,7 +18,8 @@ const NodesData = () => {
   const filterRef = useRef(null);
   const [sortBy, setSortBy] = useState("");
   const [isOpen, setIsOpen] = useState(false);
-
+  const [sortByDisplay, setSortByDisplay] = useState("");
+
 
 
   useEffect(() => {
@@ -48,6 +50,13 @@ const NodesData = () => {
     setShowFilters(false);
   };
 
+  const sortOptions = {
+    name: "Name",
+    status: "Status",
+    region: "Region",
+    networkSpeed: "Network Speed"
+  };
+
   const handleSort = (key) => {
     console.log("in handle sort ")
     setSortConfig((prevConfig) => {
@@ -61,22 +70,20 @@ const NodesData = () => {
   };
 
   const handleSortChange = (value) => {
-    console.log("in handle sort chnage ")
+    console.log("in handle sort change ");
 
     if (value) {
-
       handleSort(value);
-      console.log("in handle sort chnage done ", )
+      console.log("in handle sort change done ");
       setSortBy(value);
+      setSortByDisplay(sortOptions[value]);
       setTimeout(() => {
         setIsOpen(false);
       }, 100);
-
     }
-
-
   };
 
+
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (
@@ -249,7 +256,7 @@ const NodesData = () => {
     onClick={() => setShowFilters(!showFilters)}
     className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-12 rounded"
   >
-    {statusFilter !== 'all' || regionFilter !== 'all' || chainFilter !== 'all' ? 'Filters Applied' : 'Filters'}
+    <FilterOutlined /> {statusFilter !== 'all' || regionFilter !== 'all' || chainFilter !== 'all' ? 'Filters Applied' : 'Filter'}
   </button>
   {showFilters && (
     <div className="absolute right-0 mt-2 w-48 bg-blue-500 rounded-md shadow-lg z-10">
@@ -300,18 +307,9 @@ const NodesData = () => {
 <div className="relative inline-block text-left w-[30vh]">
       <button
         onClick={toggleDropdown}
-        className="inline-flex justify-center w-full rounded-md   shadow-sm px-4 py-2 bg-blue-500 text-md font-medium text-white hover:bg-blue-700"
-      >
-        Sort by: {sortBy || 'Select'}
-        <svg
-          className={`-mr-1 ml-2 h-5 w-5 transform transition-transform ${
-            isOpen ? 'rotate-180' : 'rotate-0'
-          }`}
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-12 rounded inline-flex items-center"
         >
+       <SortAscendingOutlined /> {sortByDisplay || 'Sort'} <svg className={`-mr-1 ml-2 h-5 w-5 transform transition-transform ${ isOpen ? 'rotate-180' : 'rotate-0' }`}  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20"  fill="currentColor"  aria-hidden="true">
           <path
             fillRule="evenodd"
             d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0l-4.25-4.25a.75.75 0 01.02-1.06z"

components/nodedataDwifi.js

@@ -1,5 +1,6 @@
 "use client"
 import React, { useState, useEffect, useRef } from 'react';
+import { FilterOutlined, SortAscendingOutlined } from '@ant-design/icons';
 
 const NodeDwifiStream = () => {
   const [data, setData] = useState([]);
@@ -12,6 +13,15 @@ const NodeDwifiStream = () => {
   const [showSortOptions, setShowSortOptions] = useState(false);
   const [sortBy, setSortBy] = useState('');
   const sortRef = useRef(null);
+  const [sortByDisplay, setSortByDisplay] = useState('');
+
+
+  const sortOptions = {
+    hostSSID: 'SSID',
+    gateway: 'IP Address',
+    chain_name: 'Chain',
+    location: 'Location'
+  };
 
 
   useEffect(() => {
@@ -132,9 +142,9 @@ const NodeDwifiStream = () => {
       direction = "descending";
     }
     setSortConfig({ key, direction });
-    // setShowSortOptions(false);
     console.log(`Sorting by: ${key}`);
     setSortBy(key);
+    setSortByDisplay(sortOptions[key]);
     setShowSortOptions(false);
   };
 
@@ -146,7 +156,7 @@ const NodeDwifiStream = () => {
     onClick={() => setShowFilters(!showFilters)}
     className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-12 rounded"
   >
-    {statusFilter !== 'all' || chainFilter !== 'all' ? 'Filters Applied' : 'Filters'}
+    <FilterOutlined /> {statusFilter !== 'all' || chainFilter !== 'all' ? 'Filters Applied' : 'Filter'}
   </button>
           {showFilters && (
             <div className="absolute right-0 mt-2 w-48 bg-blue-500 rounded-md shadow-lg z-10">
@@ -181,7 +191,7 @@ const NodeDwifiStream = () => {
         onClick={() => setShowSortOptions(!showSortOptions)}
         className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-12 rounded"
       >
-        {sortBy || 'Sort By'}
+       <SortAscendingOutlined /> {sortByDisplay || 'Sort'}
       </button>
       {showSortOptions && (
         <div className="absolute right-0 mt-2 w-48 bg-blue-500 rounded-md shadow-lg z-10">

pages/dwifi.tsx

@@ -48,7 +48,7 @@ const Dwifi = () => {
       {/* Animated Image */}
       <div className="hidden lg:block lg:w-1/3">
         <img 
-          src="/gradient-vpn-illustration.png" 
+          src="/explorerdwifi4.png" 
           alt="Decorative GIF" 
           className="w-full h-auto opacity-90 shadow-lg"
           style={{

pages/explorer.js

@@ -69,16 +69,17 @@ const Explorer = () => {
           </motion.div>
         </div>
 
-        <div className="hidden lg:block lg:w-1/3 relative">
-          <img 
-            src="/gradient-vpn-illustration.png" 
-            alt="Decorative GIF" 
-            className="w-full h-auto opacity-90 shadow-lg"
-            style={{
-              animation: 'scaleUpDown 2s infinite'
-            }}
-          />
-        </div>
+        <div className="hidden lg:block relative lg:self-start lg:mr-auto">
+            <img 
+              src="/explorerdvpn3.png" 
+              alt="vpn sheield image" 
+              className="w-full h-auto max-h-80 lg:pl-14 shadow-lg"
+              style={{
+                animation: 'scaleUpDown 2s infinite'
+              }}
+            />
+          </div>
+
       </div>
 
       <div className="pt-16 px-4 lg:px-20 bg-gradient-to-b from-black to-[#20253A]">