From 916c69602da84fbc4e7237bfd91fd85644857395 Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Mon, 27 Nov 2023 16:38:38 -0500 Subject: [PATCH] recreated many components --- components/CollectionCard.tsx | 237 ++++++++++++--------- components/DashboardItem.tsx | 2 +- components/LinkPreview.tsx | 2 +- components/Modal/Link/PreservedFormats.tsx | 4 +- components/Navbar.tsx | 28 +-- components/ProfilePhoto.tsx | 52 +++-- components/PublicPage/PublicLinkCard.tsx | 2 +- components/PublicPage/PublicSearchBar.tsx | 2 +- components/SearchBar.tsx | 2 +- components/SettingsSidebar.tsx | 44 ++-- components/Sidebar.tsx | 22 +- components/ToggleDarkMode.tsx | 19 +- layouts/SettingsLayout.tsx | 4 +- pages/dashboard.tsx | 111 ++++------ pages/public/collections/[id].tsx | 62 +++--- styles/globals.css | 1 - tailwind.config.js | 10 +- 17 files changed, 311 insertions(+), 293 deletions(-) diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index 58e1029..4923a01 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -2,29 +2,24 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faEllipsis, faGlobe, faLink } from "@fortawesome/free-solid-svg-icons"; import Link from "next/link"; import { CollectionIncludingMembersAndLinkCount } from "@/types/global"; -import Dropdown from "./Dropdown"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import ProfilePhoto from "./ProfilePhoto"; import { faCalendarDays } from "@fortawesome/free-regular-svg-icons"; import useModalStore from "@/store/modals"; import usePermissions from "@/hooks/usePermissions"; import useLocalSettingsStore from "@/store/localSettings"; +import getPublicUserData from "@/lib/client/getPublicUserData"; +import useAccountStore from "@/store/account"; type Props = { collection: CollectionIncludingMembersAndLinkCount; className?: string; }; -type DropdownTrigger = - | { - x: number; - y: number; - } - | false; - export default function CollectionCard({ collection, className }: Props) { const { setModal } = useModalStore(); const { settings } = useLocalSettingsStore(); + const { account } = useAccountStore(); const formattedDate = new Date(collection.createdAt as string).toLocaleString( "en-US", @@ -35,28 +30,40 @@ export default function CollectionCard({ collection, className }: Props) { } ); - const [expandDropdown, setExpandDropdown] = useState(false); - const permissions = usePermissions(collection.id as number); + const [collectionOwner, setCollectionOwner] = useState({ + id: null as unknown as number, + name: "", + username: "", + image: "", + }); + + useEffect(() => { + const fetchOwner = async () => { + if (collection && collection.ownerId !== account.id) { + const owner = await getPublicUserData(collection.ownerId as number); + setCollectionOwner(owner); + } else if (collection && collection.ownerId === account.id) { + setCollectionOwner({ + id: account.id as number, + name: account.name, + username: account.username as string, + image: account.image as string, + }); + } + }; + + fetchOwner(); + }, [collection]); + return ( - <> -
+
+
{ - setExpandDropdown({ x: e.clientX, y: e.clientY }); - }} - id={"expand-dropdown" + collection.id} - className="btn btn-ghost btn-sm btn-square absolute right-4 top-4 z-10" + tabIndex={0} + role="button" + className="btn btn-ghost btn-sm btn-square text-neutral" >
- -

- {collection.name} -

+
    + {permissions === true ? ( +
  • +
    + collection && + setModal({ + modal: "COLLECTION", + state: true, + method: "UPDATE", + isOwner: permissions === true, + active: collection, + }) + } + > + Edit Collection Info +
    +
    • + ) : undefined} +
  • +
    + collection && + setModal({ + modal: "COLLECTION", + state: true, + method: "UPDATE", + isOwner: permissions === true, + active: collection, + defaultIndex: permissions === true ? 1 : 0, + }) + } + > + {permissions === true ? "Share and Collaborate" : "View Team"} +
    +
    • +
  • +
    + collection && + setModal({ + modal: "COLLECTION", + state: true, + method: "UPDATE", + isOwner: permissions === true, + active: collection, + defaultIndex: permissions === true ? 2 : 1, + }) + } + > + {permissions === true ? "Delete Collection" : "Leave Collection"} +
    +
    • +
+
+ +
+
+

+ {collection.name} +

+
+
+
+ {collectionOwner.id ? ( + + ) : undefined} {collection.members .sort((a, b) => (a.userId as number) - (b.userId as number)) .map((e, i) => { @@ -81,14 +167,16 @@ export default function CollectionCard({ collection, className }: Props) { ); }) - .slice(0, 4)} - {collection.members.length - 4 > 0 ? ( -
- +{collection.members.length - 4} + .slice(0, 3)} + {collection.members.length - 3 > 0 ? ( +
+
+ +{collection.members.length - 3} +
) : null}
@@ -107,75 +195,14 @@ export default function CollectionCard({ collection, className }: Props) { /> {collection._count && collection._count.links}
-
+
-

{formattedDate}

+

{formattedDate}

- -
- {expandDropdown ? ( - { - collection && - setModal({ - modal: "COLLECTION", - state: true, - method: "UPDATE", - isOwner: permissions === true, - active: collection, - }); - setExpandDropdown(false); - }, - } - : undefined, - { - name: permissions === true ? "Share/Collaborate" : "View Team", - onClick: () => { - collection && - setModal({ - modal: "COLLECTION", - state: true, - method: "UPDATE", - isOwner: permissions === true, - active: collection, - defaultIndex: permissions === true ? 1 : 0, - }); - setExpandDropdown(false); - }, - }, - - { - name: - permissions === true ? "Delete Collection" : "Leave Collection", - onClick: () => { - collection && - setModal({ - modal: "COLLECTION", - state: true, - method: "UPDATE", - isOwner: permissions === true, - active: collection, - defaultIndex: permissions === true ? 2 : 1, - }); - setExpandDropdown(false); - }, - }, - ]} - onClickOutside={(e: Event) => { - const target = e.target as HTMLInputElement; - if (target.id !== "expand-dropdown" + collection.id) - setExpandDropdown(false); - }} - className="w-fit" - /> - ) : null} - +
+ +
); } diff --git a/components/DashboardItem.tsx b/components/DashboardItem.tsx index bb9e016..acbd1ee 100644 --- a/components/DashboardItem.tsx +++ b/components/DashboardItem.tsx @@ -10,7 +10,7 @@ type Props = { export default function dashboardItem({ name, value, icon }: Props) { return (
-
+
diff --git a/components/LinkPreview.tsx b/components/LinkPreview.tsx index 390a914..d774d93 100644 --- a/components/LinkPreview.tsx +++ b/components/LinkPreview.tsx @@ -82,7 +82,7 @@ export default function LinkPreview({ link, className, settings }: Props) {

Landing Pages ⚡️

diff --git a/components/Modal/Link/PreservedFormats.tsx b/components/Modal/Link/PreservedFormats.tsx index a4575be..933e7d1 100644 --- a/components/Modal/Link/PreservedFormats.tsx +++ b/components/Modal/Link/PreservedFormats.tsx @@ -93,7 +93,7 @@ export default function PreservedFormats() { {link?.screenshotPath && link?.screenshotPath !== "pending" ? (
-
+
@@ -128,7 +128,7 @@ export default function PreservedFormats() { {link?.pdfPath && link.pdfPath !== "pending" ? (
-
+
diff --git a/components/Navbar.tsx b/components/Navbar.tsx index d2d719a..5eed5aa 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -50,16 +50,18 @@ export default function Navbar() { }; return ( -
+
-
+ +
- - +
setProfileDropdown(!profileDropdown)} id="profile-dropdown" > -

- {account.name} -

{profileDropdown ? ( { @@ -23,25 +28,32 @@ export default function ProfilePhoto({ src, className, priority }: Props) { }, [src]); return !image ? ( -
- +
+
+ {name ? ( + {name.slice(0, 1)} + ) : ( + + )} +
) : ( - setImage("")} - className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-neutral-content ${ - className || "" - }`} - /> +
+
+ setImage("")} + className="aspect-square rounded-full" + /> +
+
); } diff --git a/components/PublicPage/PublicLinkCard.tsx b/components/PublicPage/PublicLinkCard.tsx index 0e04f3e..74b796e 100644 --- a/components/PublicPage/PublicLinkCard.tsx +++ b/components/PublicPage/PublicLinkCard.tsx @@ -57,7 +57,7 @@ export default function LinkCard({ link, count }: Props) { {e.name} diff --git a/components/PublicPage/PublicSearchBar.tsx b/components/PublicPage/PublicSearchBar.tsx index 0506f68..d751df3 100644 --- a/components/PublicPage/PublicSearchBar.tsx +++ b/components/PublicPage/PublicSearchBar.tsx @@ -52,7 +52,7 @@ export default function PublicSearchBar({ placeHolder }: Props) { ); } }} - className="border text-sm border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-8 py-2 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none" + className="border text-sm border-neutral-content bg-base-200 focus:border-primary rounded-md pl-8 py-2 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none" />
); diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx index 1ff9e80..2d80c30 100644 --- a/components/SearchBar.tsx +++ b/components/SearchBar.tsx @@ -36,7 +36,7 @@ export default function SearchBar() { e.key === "Enter" && router.push("/search?q=" + encodeURIComponent(searchQuery)) } - className="border border-neutral-content bg-base-200 focus:border-primary rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none" + className="border border-neutral-content bg-base-200 focus:border-primary py-2 rounded-md pl-10 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none" />
); diff --git a/components/SettingsSidebar.tsx b/components/SettingsSidebar.tsx index 6172f81..f3d5c1f 100644 --- a/components/SettingsSidebar.tsx +++ b/components/SettingsSidebar.tsx @@ -44,9 +44,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
@@ -58,9 +58,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
@@ -104,9 +106,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
@@ -119,9 +121,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
+ ); diff --git a/layouts/SettingsLayout.tsx b/layouts/SettingsLayout.tsx index b126a86..e576262 100644 --- a/layouts/SettingsLayout.tsx +++ b/layouts/SettingsLayout.tsx @@ -53,14 +53,14 @@ export default function SettingsLayout({ children }: Props) {
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index ea208ec..48d4228 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -23,7 +23,6 @@ import React from "react"; import useModalStore from "@/store/modals"; import { toast } from "react-hot-toast"; import { MigrationFormat, MigrationRequest } from "@/types/global"; -import ClickAwayHandler from "@/components/ClickAwayHandler"; import DashboardItem from "@/components/DashboardItem"; export default function Dashboard() { @@ -63,8 +62,6 @@ export default function Dashboard() { handleNumberOfLinksToShow(); }, [width]); - const [importDropdown, setImportDropdown] = useState(false); - const importBookmarks = async (e: any, format: MigrationFormat) => { const file: File = e.target.files[0]; @@ -92,8 +89,6 @@ export default function Dashboard() { toast.success("Imported the Bookmarks! Reloading the page..."); - setImportDropdown(false); - setTimeout(() => { location.reload(); }, 2000); @@ -200,83 +195,65 @@ export default function Dashboard() { method: "CREATE", }); }} - className="inline-flex gap-1 relative w-[11.4rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-md dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100 group" + className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent text-white group" > - Create New Link + Create New Item
-
-
setImportDropdown(!importDropdown)} - id="import-dropdown" - className="flex gap-2 select-none text-sm cursor-pointer p-2 px-3 rounded-md border dark:hover:border-sky-600 text-black border-black dark:text-white dark:border-white hover:border-primary hover:dark:border-primary hover:text-primary duration-100 group" - > +
+ - + Import Your Bookmarks -
- {importDropdown ? ( - { - const target = e.target as HTMLInputElement; - if (target.id !== "import-dropdown") - setImportDropdown(false); - }} - className={`absolute top-10 left-0 w-52 py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`} - > -
- - -
- - ) : null} -
+ +
    +
  • + +
    • +
  • + +
    • +
+
)} diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx index bb1f312..6060c0f 100644 --- a/pages/public/collections/[id].tsx +++ b/pages/public/collections/[id].tsx @@ -128,7 +128,7 @@ export default function PublicCollections() { {collection.name}

- + Linkwarden
-
+
-
- setModal({ - modal: "COLLECTION", - state: true, - method: "VIEW_TEAM", - isOwner: false, - active: collection, - defaultIndex: 0, - }) - } - className="hover:opacity-80 duration-100 flex justify-center sm:justify-end items-start w-fit cursor-pointer" - > +
{collectionOwner.id ? ( ) : undefined} {collection.members @@ -172,24 +158,40 @@ export default function PublicCollections() { ); }) - .slice(0, 3)} + .slice(0, 4)} {collection?.members.length && collection.members.length - 3 > 0 ? ( -
- +{collection?.members?.length - 3} +
+
+ +{collection.members.length - 3} +
) : null} -

- By {collectionOwner.name} - {collection.members.length > 0 - ? ` and ${collection.members.length} others` - : undefined} - . +

+ By + + setModal({ + modal: "COLLECTION", + state: true, + method: "VIEW_TEAM", + isOwner: false, + active: collection, + defaultIndex: 0, + }) + } + > + {collectionOwner.name} + {collection.members.length > 0 + ? ` and ${collection.members.length} others` + : undefined} +

diff --git a/styles/globals.css b/styles/globals.css index 1821eda..eb8c364 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -155,7 +155,6 @@ body { /* Theme */ -/* react-select */ @layer components { .react-select-container .react-select__control { @apply bg-base-200 dark:hover:border-neutral-500 border-red-500 border; diff --git a/tailwind.config.js b/tailwind.config.js index cca5b45..ca54c02 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,8 +7,8 @@ module.exports = { { light: { primary: "#0ea5e9", - secondary: "#22d3ee", - accent: "#4f46e5", + secondary: "#06b6d4", + accent: "#6366f1", neutral: "#6b7280", "neutral-content": "#d1d5db", "base-100": "#ffffff", @@ -22,9 +22,9 @@ module.exports = { }, { dark: { - primary: "#38bdf8", - secondary: "#0284c7", - accent: "#818cf8", + primary: "#0ea5e9", + secondary: "#0e7490", + accent: "#6366f1", neutral: "#9ca3af", "neutral-content": "#404040", "base-100": "#171717",