egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

many breaking changes/fixes

Browse Source
This commit is contained in:
Daniel
2023-03-28 11:01:50 +03:30
parent 3a5ae28f86
commit b9567ca3c2
43 changed files with 1180 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Navbar.tsx
+76 -88
View File
@@ -1,62 +1,25 @@
import { useRouter } from "next/router";
import useCollectionStore from "@/store/collections";
import { Collection, Tag } from "@prisma/client";
import ClickAwayHandler from "./ClickAwayHandler";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { signOut } from "next-auth/react";
import { useSession } from "next-auth/react";
import {
faPlus,
faFolder,
faBox,
faHashtag,
faBookmark,
faMagnifyingGlass,
IconDefinition,
faCircleUser,
faSliders,
faArrowRightFromBracket,
faChevronDown,
} from "@fortawesome/free-solid-svg-icons";
import { useEffect, useState } from "react";
import AddLinkModal from "./AddLinkModal";
import useTagStore from "@/store/tags";
import { useState } from "react";
import Dropdown from "@/components/Dropdown";
import Modal from "./Modal";
import AddLink from "./Modal/AddLink";
export default function () {
const router = useRouter();
const [pageName, setPageName] = useState<string | null>("");
const [pageIcon, setPageIcon] = useState<IconDefinition | null>(null);
const { data: session } = useSession();
const { collections } = useCollectionStore();
const { tags } = useTagStore();
const [profileDropdown, setProfileDropdown] = useState(false);
useEffect(() => {
if (router.route === "/collections/[id]") {
const collectionId = router.query.id;
const activeCollection: Collection | undefined = collections.find(
(e) => e.id.toString() == collectionId
);
if (activeCollection) {
setPageName(activeCollection?.name);
}
setPageIcon(faFolder);
} else if (router.route === "/tags/[id]") {
const tagId = router.query.id;
const activeTag: Tag | undefined = tags.find(
(e) => e.id.toString() == tagId
);
if (activeTag) {
setPageName(activeTag?.name);
}
setPageIcon(faHashtag);
} else if (router.route === "/collections") {
setPageName("All Collections");
setPageIcon(faBox);
} else if (router.route === "/links") {
setPageName("All Links");
setPageIcon(faBookmark);
}
}, [router, collections, tags]);
const user = session?.user;
const [linkModal, setLinkModal] = useState(false);
@@ -65,50 +28,75 @@ export default function () {
};
return (
<div className="flex justify-between items-center p-2 border-solid border-b-sky-100 border-b">
<div className="text-sky-900 rounded-md my-1 flex items-center gap-2 font-bold">
{pageIcon ? (
<FontAwesomeIcon icon={pageIcon} className="w-4 text-sky-300" />
) : null}
<p>{pageName}</p>
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b">
<div className="flex items-center relative">
<label
htmlFor="search-box"
className="inline-flex w-fit absolute right-0 cursor-pointer select-none rounded-md p-1 text-sky-500"
>
<FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
</label>
<input
id="search-box"
type="text"
placeholder="Search for Links"
className="border border-sky-100 rounded-md pr-6 w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-1 text-sm"
/>
</div>
<div className="flex items-center gap-2 justify-between">
<div className="flex items-center relative">
<label
htmlFor="search-box"
className="inline-flex w-fit absolute right-0 cursor-pointer"
title="Search"
>
<FontAwesomeIcon
icon={faMagnifyingGlass}
className="select-none w-5 h-5 rounded-md p-1 text-sky-500 "
/>
</label>
<input
id="search-box"
type="text"
placeholder="Search for Links"
className="border border-sky-100 rounded-md pr-6 w-6 focus:border-sky-500 focus:w-60 hover:border-sky-500 duration-100 outline-none p-1 text-sm"
/>
</div>
<FontAwesomeIcon
icon={faPlus}
<div className="flex items-center gap-2">
<div
onClick={toggleLinkModal}
title="New Link"
className="select-none cursor-pointer w-5 h-5 text-sky-500 p-1 rounded-md hover:outline-sky-500 outline duration-100 hover:bg-white outline-sky-100 outline-1"
/>
className="inline-flex gap-1 items-center select-none cursor-pointer p-1 text-sky-500 rounded-md hover:outline-sky-500 outline duration-100 bg-white outline-sky-100 outline-1"
>
<FontAwesomeIcon icon={faPlus} className="w-5 h-5" />
</div>
{linkModal ? (
<div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-10">
<ClickAwayHandler
onClickOutside={toggleLinkModal}
className="w-fit mx-auto"
>
<AddLinkModal toggleLinkModal={toggleLinkModal} />
</ClickAwayHandler>
</div>
<Modal toggleModal={toggleLinkModal}>
<AddLink toggleLinkModal={toggleLinkModal} />
</Modal>
) : null}
<div className="relative">
<div
className="flex gap-2 items-center p-1 w-fit bg-white text-gray-600 cursor-pointer border border-sky-100 hover:border-sky-500 rounded-md duration-100"
onClick={() => setProfileDropdown(!profileDropdown)}
id="profile-dropdown"
>
<FontAwesomeIcon
icon={faCircleUser}
className="h-5 w-5 pointer-events-none"
/>
<div className="flex items-center gap-1 pointer-events-none">
<p className="font-bold leading-3">{user?.name}</p>
<FontAwesomeIcon icon={faChevronDown} className="h-3 w-3" />
</div>
</div>
{profileDropdown ? (
<Dropdown
items={[
{
name: "Settings",
icon: <FontAwesomeIcon icon={faSliders} />,
},
{
name: "Logout",
icon: <FontAwesomeIcon icon={faArrowRightFromBracket} />,
onClick: () => {
signOut();
setProfileDropdown(!profileDropdown);
},
},
]}
onClickOutside={(e: Event) => {
const target = e.target as HTMLInputElement;
if (target.id !== "profile-dropdown") setProfileDropdown(false);
}}
className="absolute top-8 right-0 z-20"
/>
) : null}
</div>
</div>
</div>
);