better looking dropdown component

2023-05-28 06:51:35 +03:30 · 2023-05-28 06:51:35 +03:30 · 577b279108
parent d2051a67ab
commit 577b279108
7 changed files with 51 additions and 61 deletions
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@ -4,11 +4,7 @@
 // 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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faPenToSquare,
-  faTrashCan,
-  faEllipsis,
-} from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { CollectionIncludingMembers } from "@/types/global";
 import useLinkStore from "@/store/links";
@ -50,12 +46,12 @@ export default function ({
    <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-md shadow duration-100 hover:shadow-none group relative">
      <div
        onClick={() => setExpandDropdown(!expandDropdown)}
-        id="edit-dropdown"
+        id={"expand-dropdown" + collection.id}
        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
      >
        <FontAwesomeIcon
          icon={faEllipsis}
-          id="edit-dropdown"
+          id={"expand-dropdown" + collection.id}
          className="w-5 h-5 text-gray-500"
        />
      </div>
@ -100,7 +96,6 @@ export default function ({
          items={[
            {
              name: "Edit Collection",
-              icon: <FontAwesomeIcon icon={faPenToSquare} />,
              onClick: () => {
                toggleEditCollectionModal();
                setExpandDropdown(false);
@ -108,7 +103,6 @@ export default function ({
            },
            {
              name: "Delete Collection",
-              icon: <FontAwesomeIcon icon={faTrashCan} />,
              onClick: () => {
                toggleDeleteCollectionModal();
                setExpandDropdown(false);
@ -117,9 +111,10 @@ export default function ({
          ]}
          onClickOutside={(e: Event) => {
            const target = e.target as HTMLInputElement;
-            if (target.id !== "edit-dropdown") setExpandDropdown(false);
+            if (target.id !== "expand-dropdown" + collection.id)
+              setExpandDropdown(false);
          }}
-          className="absolute top-[3.2rem] right-5 z-10 w-44"
+          className="absolute top-[3.2rem] right-5 z-10 w-36"
        />
      ) : null}

--- a/components/Dashboard/LinkItem.tsx
+++ b/components/Dashboard/LinkItem.tsx
@ -8,8 +8,6 @@ import {
  faFolder,
  faArrowUpRightFromSquare,
  faEllipsis,
-  faPenToSquare,
-  faTrashCan,
 } from "@fortawesome/free-solid-svg-icons";
 import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -124,14 +122,14 @@ export default function ({ link, count }: Props) {
        <div className="flex flex-col justify-between items-end relative">
          <div
            onClick={() => setExpandDropdown(!expandDropdown)}
-            id="edit-dropdown"
+            id="expand-dropdown"
            className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1"
          >
            <FontAwesomeIcon
              icon={faEllipsis}
              title="More"
              className="w-6 h-6"
-              id="edit-dropdown"
+              id="expand-dropdown"
            />
          </div>
          <div className="relative">
@ -168,7 +166,6 @@ export default function ({ link, count }: Props) {
              items={[
                {
                  name: "Edit",
-                  icon: <FontAwesomeIcon icon={faPenToSquare} />,
                  onClick: () => {
                    setEditModal(true);
                    setExpandDropdown(false);
@ -176,7 +173,6 @@ export default function ({ link, count }: Props) {
                },
                {
                  name: "Delete",
-                  icon: <FontAwesomeIcon icon={faTrashCan} />,
                  onClick: () => {
                    removeLink(link);
                    setExpandDropdown(false);
@ -185,7 +181,7 @@ export default function ({ link, count }: Props) {
              ]}
              onClickOutside={(e: Event) => {
                const target = e.target as HTMLInputElement;
-                if (target.id !== "edit-dropdown") setExpandDropdown(false);
+                if (target.id !== "expand-dropdown") setExpandDropdown(false);
              }}
              className="absolute top-8 right-0 w-36"
            />
--- a/components/Dropdown.tsx
+++ b/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>
        );
--- a/components/LinkList.tsx
+++ b/components/LinkList.tsx
@ -8,8 +8,6 @@ import {
  faFolder,
  faArrowUpRightFromSquare,
  faEllipsis,
-  faPenToSquare,
-  faTrashCan,
 } from "@fortawesome/free-solid-svg-icons";
 import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -124,14 +122,14 @@ export default function ({ link, count }: Props) {
        <div className="flex flex-col justify-between items-end relative">
          <div
            onClick={() => setExpandDropdown(!expandDropdown)}
-            id="edit-dropdown"
+            id={"expand-dropdown" + link.id}
            className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1"
          >
            <FontAwesomeIcon
              icon={faEllipsis}
              title="More"
              className="w-5 h-5"
-              id="edit-dropdown"
+              id={"expand-dropdown" + link.id}
            />
          </div>
          <div className="relative">
@ -168,7 +166,6 @@ export default function ({ link, count }: Props) {
              items={[
                {
                  name: "Edit",
-                  icon: <FontAwesomeIcon icon={faPenToSquare} />,
                  onClick: () => {
                    setEditModal(true);
                    setExpandDropdown(false);
@ -176,7 +173,6 @@ export default function ({ link, count }: Props) {
                },
                {
                  name: "Delete",
-                  icon: <FontAwesomeIcon icon={faTrashCan} />,
                  onClick: () => {
                    removeLink(link);
                    setExpandDropdown(false);
@ -185,9 +181,10 @@ export default function ({ link, count }: Props) {
              ]}
              onClickOutside={(e: Event) => {
                const target = e.target as HTMLInputElement;
-                if (target.id !== "edit-dropdown") setExpandDropdown(false);
+                if (target.id !== "expand-dropdown" + link.id)
+                  setExpandDropdown(false);
              }}
-              className="absolute top-8 right-0 w-36"
+              className="absolute top-7 right-0 w-36"
            />
          ) : null}
        </div>
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@ -8,8 +8,6 @@ import { signOut } from "next-auth/react";
 import {
  faPlus,
  faCircleUser,
-  faSliders,
-  faArrowRightFromBracket,
  faChevronDown,
  faBars,
 } from "@fortawesome/free-solid-svg-icons";
@ -104,7 +102,6 @@ export default function () {
              items={[
                {
                  name: "Settings",
-                  icon: <FontAwesomeIcon icon={faSliders} />,
                  onClick: () => {
                    toggleSettingsModal();
                    setProfileDropdown(!profileDropdown);
@ -112,7 +109,6 @@ export default function () {
                },
                {
                  name: "Logout",
-                  icon: <FontAwesomeIcon icon={faArrowRightFromBracket} />,
                  onClick: () => {
                    signOut();
                    setProfileDropdown(!profileDropdown);
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@ -13,12 +13,9 @@ import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
 import { CollectionIncludingMembers } from "@/types/global";
 import {
-  faAdd,
  faEllipsis,
  faFolder,
-  faPenToSquare,
  faSort,
-  faTrashCan,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
@ -231,12 +228,12 @@ export default function () {
              <div className="relative">
                <div
                  onClick={() => setExpandDropdown(!expandDropdown)}
-                  id="edit-dropdown"
+                  id="expand-dropdown"
                  className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
                >
                  <FontAwesomeIcon
                    icon={faEllipsis}
-                    id="edit-dropdown"
+                    id="expand-dropdown"
                    title="More"
                    className="w-5 h-5 text-gray-500"
                  />
@ -246,7 +243,6 @@ export default function () {
                    items={[
                      {
                        name: "Add Link Here",
-                        icon: <FontAwesomeIcon icon={faAdd} />,
                        onClick: () => {
                          toggleLinkModal();
                          setExpandDropdown(false);
@ -254,7 +250,17 @@ export default function () {
                      },
                      {
                        name: "Edit Collection",
-                        icon: <FontAwesomeIcon icon={faPenToSquare} />,
+                        onClick: () => {
+                          toggleEditCollectionModal();
+                          setExpandDropdown(false);
+                        },
+                      },
+                      {
+                        name: `${
+                          activeCollection?.ownerId === data?.user.id
+                            ? "Manage"
+                            : "View"
+                        } Team`,
                        onClick: () => {
                          toggleEditCollectionModal();
                          setExpandDropdown(false);
@ -262,7 +268,6 @@ export default function () {
                      },
                      {
                        name: "Delete Collection",
-                        icon: <FontAwesomeIcon icon={faTrashCan} />,
                        onClick: () => {
                          toggleDeleteCollectionModal();
                          setExpandDropdown(false);
@ -271,10 +276,10 @@ export default function () {
                    ]}
                    onClickOutside={(e: Event) => {
                      const target = e.target as HTMLInputElement;
-                      if (target.id !== "edit-dropdown")
+                      if (target.id !== "expand-dropdown")
                        setExpandDropdown(false);
                    }}
-                    className="absolute top-8 right-0 z-10 w-44"
+                    className="absolute top-8 right-0 z-10 w-36"
                  />
                ) : null}

--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@ -5,7 +5,6 @@

 import useCollectionStore from "@/store/collections";
 import {
-  faAdd,
  faBox,
  faEllipsis,
  faPlus,
@ -95,12 +94,12 @@ export default function () {
            <div className="relative">
              <div
                onClick={() => setExpandDropdown(!expandDropdown)}
-                id="edit-dropdown"
+                id="expand-dropdown"
                className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
              >
                <FontAwesomeIcon
                  icon={faEllipsis}
-                  id="edit-dropdown"
+                  id="expand-dropdown"
                  className="w-5 h-5 text-gray-500"
                />
              </div>
@ -109,8 +108,7 @@ export default function () {
                <Dropdown
                  items={[
                    {
-                      name: "New",
-                      icon: <FontAwesomeIcon icon={faAdd} />,
+                      name: "New Collection",
                      onClick: () => {
                        toggleCollectionModal();
                        setExpandDropdown(false);
@ -119,7 +117,8 @@ export default function () {
                  ]}
                  onClickOutside={(e: Event) => {
                    const target = e.target as HTMLInputElement;
-                    if (target.id !== "edit-dropdown") setExpandDropdown(false);
+                    if (target.id !== "expand-dropdown")
+                      setExpandDropdown(false);
                  }}
                  className="absolute top-8 left-0 w-36"
                />