From bef8ad976dc253aa3fae2a4b7cf4388e25ee5893 Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Thu, 30 Nov 2023 04:36:40 -0500 Subject: [PATCH] recreated the rest of the dropdowns using daisyui --- components/CollectionCard.tsx | 73 ++++++------ components/FilterSearchDropdown.tsx | 170 +++++++++++++++++++--------- components/LinkCard.tsx | 152 ++++++++++++++----------- components/Navbar.tsx | 44 +++++-- components/SortDropdown.tsx | 20 ++-- pages/collections/[id].tsx | 130 ++++++++++----------- pages/collections/index.tsx | 57 +++++----- pages/dashboard.tsx | 10 +- pages/public/collections/[id].tsx | 27 +---- pages/search.tsx | 25 +--- pages/tags/[id].tsx | 50 ++++++-- 11 files changed, 437 insertions(+), 321 deletions(-) diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index fcea927..e2b85f8 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -65,29 +65,26 @@ export default function CollectionCard({ collection, className }: Props) { role="button" className="btn btn-ghost btn-sm btn-square text-neutral" > - + -
    +
      {permissions === true ? (
    • + onClick={() => { + (document?.activeElement as HTMLElement)?.blur(); collection && - setModal({ - modal: "COLLECTION", - state: true, - method: "UPDATE", - isOwner: permissions === true, - active: collection, - }) - } + setModal({ + modal: "COLLECTION", + state: true, + method: "UPDATE", + isOwner: permissions === true, + active: collection, + }); + }} > Edit Collection Info
      @@ -95,38 +92,42 @@ export default function CollectionCard({ collection, className }: Props) { ) : undefined}
    • + onClick={() => { + (document?.activeElement as HTMLElement)?.blur(); collection && - setModal({ - modal: "COLLECTION", - state: true, - method: "UPDATE", - isOwner: permissions === true, - active: collection, - defaultIndex: permissions === true ? 1 : 0, - }) - } + setModal({ + modal: "COLLECTION", + state: true, + method: "UPDATE", + isOwner: permissions === true, + active: collection, + defaultIndex: permissions === true ? 1 : 0, + }); + }} > {permissions === true ? "Share and Collaborate" : "View Team"}
    • + onClick={() => { + (document?.activeElement as HTMLElement)?.blur(); collection && - setModal({ - modal: "COLLECTION", - state: true, - method: "UPDATE", - isOwner: permissions === true, - active: collection, - defaultIndex: permissions === true ? 2 : 1, - }) - } + setModal({ + modal: "COLLECTION", + state: true, + method: "UPDATE", + isOwner: permissions === true, + active: collection, + defaultIndex: permissions === true ? 2 : 1, + }); + }} > {permissions === true ? "Delete Collection" : "Leave Collection"}
      diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx index a137017..76b1672 100644 --- a/components/FilterSearchDropdown.tsx +++ b/components/FilterSearchDropdown.tsx @@ -1,9 +1,8 @@ -import React, { SetStateAction } from "react"; -import ClickAwayHandler from "./ClickAwayHandler"; -import Checkbox from "./Checkbox"; +import React from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faFilter } from "@fortawesome/free-solid-svg-icons"; type Props = { - setFilterDropdown: (value: SetStateAction) => void; setSearchFilter: Function; searchFilter: { name: boolean; @@ -15,62 +14,123 @@ type Props = { }; export default function FilterSearchDropdown({ - setFilterDropdown, setSearchFilter, searchFilter, }: Props) { return ( - { - const target = e.target as HTMLInputElement; - if (target.id !== "filter-dropdown") setFilterDropdown(false); - }} - className="absolute top-8 right-0 border border-neutral-content shadow-md bg-base-200 rounded-md p-2 z-20 w-40" - > -

      Filter by

      -
      - - setSearchFilter({ ...searchFilter, name: !searchFilter.name }) - } - /> - - setSearchFilter({ ...searchFilter, url: !searchFilter.url }) - } - /> - - setSearchFilter({ - ...searchFilter, - description: !searchFilter.description, - }) - } - /> - - setSearchFilter({ - ...searchFilter, - textContent: !searchFilter.textContent, - }) - } - /> - - setSearchFilter({ ...searchFilter, tags: !searchFilter.tags }) - } +
      +
      +
      - +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      ); } diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx index 9d49342..0fdc1f9 100644 --- a/components/LinkCard.tsx +++ b/components/LinkCard.tsx @@ -142,24 +142,94 @@ export default function LinkCard({ link, count, className }: Props) { className || "" }`} > - {(permissions === true || - permissions?.canUpdate || - permissions?.canDelete) && ( -
      { - setExpandDropdown({ x: e.clientX, y: e.clientY }); - }} - id={"expand-dropdown" + link.id} - className="btn btn-ghost btn-sm btn-square absolute right-4 top-4 z-10" - > - + {permissions === true || + permissions?.canUpdate || + permissions?.canDelete ? ( +
      +
      + +
      +
        + {permissions === true ? ( +
      • +
        { + (document?.activeElement as HTMLElement)?.blur(); + pinLink(); + }} + > + {link?.pinnedBy && link.pinnedBy[0] + ? "Unpin" + : "Pin to Dashboard"} +
        +
        • + ) : undefined} + {permissions === true || permissions?.canUpdate ? ( +
      • +
        { + (document?.activeElement as HTMLElement)?.blur(); + collection && + setModal({ + modal: "LINK", + state: true, + method: "UPDATE", + active: link, + }); + }} + > + Edit +
        +
        • + ) : undefined} + {permissions === true ? ( +
      • +
        { + (document?.activeElement as HTMLElement)?.blur(); + updateArchive(); + }} + > + Refresh Link +
        +
        • + ) : undefined} + {permissions === true || permissions?.canDelete ? ( +
      • +
        { + (document?.activeElement as HTMLElement)?.blur(); + deleteLink(); + }} + > + Delete +
        +
        • + ) : undefined} +
      - )} + ) : undefined}
      router.push("/links/" + link.id)} @@ -244,54 +314,6 @@ export default function LinkCard({ link, count, className }: Props) {
      - {expandDropdown ? ( - { - setModal({ - modal: "LINK", - state: true, - method: "UPDATE", - active: link, - }); - setExpandDropdown(false); - }, - } - : undefined, - permissions === true - ? { - name: "Refresh Link", - onClick: updateArchive, - } - : undefined, - permissions === true || permissions?.canDelete - ? { - name: "Delete", - onClick: deleteLink, - } - : undefined, - ]} - onClickOutside={(e: Event) => { - const target = e.target as HTMLInputElement; - if (target.id !== "expand-dropdown" + link.id) - setExpandDropdown(false); - }} - className="w-40" - /> - ) : null} ); } diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 5e58daa..d17c3d1 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -75,10 +75,14 @@ export default function Navbar() { -
        +
        • setNewLinkModalIsOpen(true)} + className="px-2 py-1 rounded-lg" + onClick={() => { + (document?.activeElement as HTMLElement)?.blur(); + setNewLinkModalIsOpen(true); + }} tabIndex={0} role="button" > @@ -87,7 +91,11 @@ export default function Navbar() {
        • setNewCollectionModalIsOpen(true)} + className="px-2 py-1 rounded-lg" + onClick={() => { + (document?.activeElement as HTMLElement)?.blur(); + setNewCollectionModalIsOpen(true); + }} tabIndex={0} role="button" > @@ -105,19 +113,41 @@ export default function Navbar() { className="" />
          -
            +
            • - + (document?.activeElement as HTMLElement)?.blur()} + tabIndex={0} + role="button" + > Settings
            • -
              +
              { + (document?.activeElement as HTMLElement)?.blur(); + handleToggle(); + }} + tabIndex={0} + role="button" + > Switch to {settings.theme === "light" ? "Dark" : "Light"}
            • -
              signOut()} tabIndex={0} role="button"> +
              { + (document?.activeElement as HTMLElement)?.blur(); + signOut(); + }} + tabIndex={0} + role="button" + > Logout
              • diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx index 4522b30..77b4758 100644 --- a/components/SortDropdown.tsx +++ b/components/SortDropdown.tsx @@ -14,7 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
              -
                +