better looking dropdown component

components/Dropdown.tsx

@@ -4,15 +4,20 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import Link from "next/link";
-import React, { MouseEventHandler, ReactElement } from "react";
+import React, { MouseEventHandler } from "react";
 import ClickAwayHandler from "./ClickAwayHandler";
 
-type MenuItem = {
-  name: string;
-  icon: ReactElement;
-  onClick?: MouseEventHandler;
-  href?: string;
-};
+type MenuItem =
+  | {
+      name: string;
+      onClick: MouseEventHandler;
+      href?: string;
+    }
+  | {
+      name: string;
+      onClick?: MouseEventHandler;
+      href: string;
+    };
 
 type Props = {
   onClickOutside: Function;
@@ -20,20 +25,17 @@ type Props = {
   items: MenuItem[];
 };
 
-export default function ({ onClickOutside, className, items }: Props) {
+export default function Dropdown({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} border border-sky-100 shadow-md mb-5 bg-gray-50 rounded-md flex flex-col z-10`}
+      className={`${className} border border-sky-100 py-1 shadow-md bg-gray-50 rounded-md flex flex-col z-10`}
     >
       {items.map((e, i) => {
         const inner = (
-          <div className="cursor-pointer rounded-md hover:bg-white hover:outline outline-sky-100 outline-1 duration-100">
-            <div className="flex items-center gap-2 p-2 rounded-md hover:opacity-60 duration-100">
-              {React.cloneElement(e.icon, {
-                className: "text-sky-500 w-5 h-5",
-              })}
-              <p className="text-sky-900">{e.name}</p>
+          <div className="cursor-pointer rounded-md">
+            <div className="flex items-center gap-2 py-1 px-2 hover:bg-sky-200 duration-100">
+              <p className="text-sky-900 select-none">{e.name}</p>
             </div>
           </div>
         );