minor improvements

This commit is contained in:
Daniel 2023-08-31 00:00:57 -04:00
parent 5015f79b81
commit fab9a06d95
4 changed files with 19 additions and 17 deletions

View File

@ -3,17 +3,19 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react"; import React from "react";
import useModalStore from "@/store/modals"; import useModalStore from "@/store/modals";
export default function NoLinksFound() { type Props = {
text?: string;
};
export default function NoLinksFound({ text }: Props) {
const { setModal } = useModalStore(); const { setModal } = useModalStore();
return ( return (
<div className="border border-solid border-sky-100 dark:border-neutral-700 w-full p-10 rounded-2xl"> <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
<p className="text-center text-3xl text-black dark:text-white"> <p className="text-center text-2xl text-black dark:text-white">
You haven&apos;t created any Links Here {text || "You haven't created any Links Here"}
</p> </p>
<br /> <div className="text-center text-black dark:text-white w-full mt-4">
<div className="text-center text-black dark:text-white text-sm flex items-baseline justify-center gap-1 w-full">
<p>Start by creating a</p>{" "}
<div <div
onClick={() => { onClick={() => {
setModal({ setModal({
@ -22,14 +24,14 @@ export default function NoLinksFound() {
method: "CREATE", method: "CREATE",
}); });
}} }}
className="inline-flex gap-1 relative w-[7.2rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full text-white bg-sky-700 dark:bg-sky-400 hover:bg-sky-600 duration-100 group" className="inline-flex gap-1 relative w-[11.4rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100 group"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faPlus} icon={faPlus}
className="w-5 h-5 group-hover:ml-9 absolute duration-100" className="w-5 h-5 group-hover:ml-[4.325rem] absolute duration-100"
/> />
<span className="block group-hover:opacity-0 text-right w-full duration-100"> <span className="group-hover:opacity-0 text-right w-full duration-100">
New Link Create New Link
</span> </span>
</div> </div>
</div> </div>

View File

@ -44,7 +44,7 @@ export default function Search() {
router.push("/search/" + encodeURIComponent(searchQuery)) router.push("/search/" + encodeURIComponent(searchQuery))
} }
autoFocus={searchBox} autoFocus={searchBox}
className="border border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-950" className="border border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-800"
/> />
</div> </div>
); );

View File

@ -12,7 +12,7 @@ export default function useLinks(
pinnedOnly, pinnedOnly,
collectionId, collectionId,
tagId, tagId,
}: Omit<LinkRequestQuery, "cursor"> = { sort: 0 } }: LinkRequestQuery = { sort: 0 }
) { ) {
const { links, setLinks, resetLinks } = useLinkStore(); const { links, setLinks, resetLinks } = useLinkStore();
const router = useRouter(); const router = useRouter();

View File

@ -61,7 +61,7 @@ export default function Dashboard() {
</div> </div>
<div className="flex flex-col md:flex-row md:items-center gap-5"> <div className="flex flex-col md:flex-row md:items-center gap-5">
<div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700"> <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300"> <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
{numberOfLinks} {numberOfLinks}
</p> </p>
@ -70,7 +70,7 @@ export default function Dashboard() {
</p> </p>
</div> </div>
<div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700"> <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300"> <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
{collections.length} {collections.length}
</p> </p>
@ -79,7 +79,7 @@ export default function Dashboard() {
</p> </p>
</div> </div>
<div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700"> <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300"> <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
{tags.length} {tags.length}
</p> </p>
@ -127,7 +127,7 @@ export default function Dashboard() {
))} ))}
</div> </div>
) : ( ) : (
<div className="border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl"> <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
<p className="text-center text-2xl text-black dark:text-white"> <p className="text-center text-2xl text-black dark:text-white">
No Pinned Links No Pinned Links
</p> </p>