add vpn and delegates

src/components/DropdownTransaction.jsx

@@ -0,0 +1,104 @@
+import React, { useState, useRef, useEffect } from "react";
+import Transition from "../utils/Transition";
+
+function DropdownTransaction({ align, value, onChange }) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  const changeValue = (val) => {
+    setDropdownOpen(false);
+    onChange(val);
+  };
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (
+        !dropdownOpen ||
+        dropdown.current.contains(target) ||
+        trigger.current.contains(target)
+      )
+        return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener("click", clickHandler);
+    return () => document.removeEventListener("click", clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener("keydown", keyHandler);
+    return () => document.removeEventListener("keydown", keyHandler);
+  });
+
+  return (
+    <div className="relative inline-flex">
+      <button
+        ref={trigger}
+        className="inline-flex justify-center items-center group"
+        aria-haspopup="true"
+        aria-expanded={dropdownOpen}
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+      >
+        <div className="flex items-center truncate">
+          <span className="truncate font-medium text-indigo-500 group-hover:text-indigo-600">
+            {value}
+          </span>
+          <svg
+            className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400"
+            viewBox="0 0 12 12"
+          >
+            <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
+          </svg>
+        </div>
+      </button>
+
+      <Transition
+        className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
+          align === "right" ? "right-0" : "left-0"
+        }`}
+        show={dropdownOpen}
+        enter="transition ease-out duration-200 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-200"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <div
+          ref={dropdown}
+          onFocus={() => setDropdownOpen(true)}
+          onBlur={() => setDropdownOpen(false)}
+        >
+          <ul>
+            <li>
+              <span
+                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3 cursor-pointer"
+                onClick={() => changeValue("Voiting")}
+              >
+                Voiting
+              </span>
+            </li>
+            <li>
+              <span
+                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3 cursor-pointer"
+                onClick={() => changeValue("Unvoiting")}
+              >
+                Unvoiting
+              </span>
+            </li>
+          </ul>
+        </div>
+      </Transition>
+    </div>
+  );
+}
+
+export default DropdownTransaction;

src/components/Filters.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+export const Filters = ({ value, onChange, values = [] }) => {
+  return (
+    <div className="mb-5">
+      <ul className="flex flex-wrap -m-1">
+        {values.map((e) =>
+          e === value ? (
+            <li className="m-1" key={e}>
+              <button
+                className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out"
+                onClick={() => onChange(e)}
+              >
+                {e}
+              </button>
+            </li>
+          ) : (
+            <li className="m-1" key={e}>
+              <button
+                className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out"
+                onClick={() => onChange(e)}
+              >
+                {e}
+              </button>
+            </li>
+          )
+        )}
+      </ul>
+    </div>
+  );
+};

src/components/PaginationClassic.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import cn from 'classnames'
+
+function PaginationClassic({count, limit, offset, onNextPage, onPrevPage}) {
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+      <nav className="mb-4 sm:mb-0 sm:order-1" role="navigation" aria-label="Navigation">
+        <ul className="flex justify-center">
+          <li className="ml-3 first:ml-0">
+            <button
+              className={
+              cn(
+                "btn bg-white border-slate-200 text-indigo-500",
+                {'cursor-not-allowed text-slate-300': offset === 0},
+                {'hover:border-slate-300' : offset !== 0}
+              )}
+              disabled={offset === 0}
+              onClick={onPrevPage}>&lt;- Previous</button>
+          </li>
+          <li className="ml-3 first:ml-0">
+            <button
+              className={cn(
+                "btn bg-white border-slate-200 text-indigo-500",
+                {'cursor-not-allowed text-slate-300': offset + limit >= count},
+                {'hover:border-slate-300' : offset + limit < count}
+              )}
+              disabled={offset + limit >= count}
+              onClick={onNextPage}>Next -&gt;</button>
+          </li>
+        </ul>
+      </nav>
+      <div className="text-sm text-slate-500 text-center sm:text-left">
+        Showing <span className="font-medium text-slate-600">{offset + 1}</span> to <span className="font-medium text-slate-600">{offset+limit}</span> of <span className="font-medium text-slate-600">{count}</span> results
+      </div>
+    </div>
+  );
+}
+
+export default PaginationClassic;