Removing redundant components

src/components/DropdownTransaction.jsx

@@ -1,90 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import Transition from '../utils/Transition';
-
-function DropdownTransaction({
-  align
-}) {
-
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-
-  const trigger = useRef(null);
-  const dropdown = useRef(null);
-
-  // 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"
-        onClick={() => setDropdownOpen(!dropdownOpen)}
-        aria-expanded={dropdownOpen}
-      >
-        <div className="flex items-center truncate">
-          <span className="truncate font-medium text-indigo-500 group-hover:text-indigo-600">My Personal Account</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>
-              <a
-                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
-                href="#0"
-                onClick={() => setDropdownOpen(!dropdownOpen)}
-              >
-                Business Account
-              </a>
-            </li>
-            <li>
-              <a
-                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
-                href="#0"
-                onClick={() => setDropdownOpen(!dropdownOpen)}
-              >
-                Family Account
-              </a>
-            </li>
-          </ul>
-        </div>
-      </Transition>
-    </div>
-  );
-}
-
-export default DropdownTransaction;