UI improvement
This commit is contained in:
Daniel
parent
67989b7c05
commit
96f43dcc59
|
|
@ -45,7 +45,7 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
|
|||
return (
|
||||
<Select
|
||||
isClearable
|
||||
placeholder="Unnamed Collection"
|
||||
placeholder="Default: Unnamed Collection"
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
styles={styles}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import { faPlus } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import React from "react";
|
||||
import useModalStore from "@/store/modals";
|
||||
|
||||
export default function NoLinksFound() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
return (
|
||||
<div className="border border-solid border-sky-100 w-full p-10 rounded-2xl">
|
||||
<p className="text-center text-3xl text-sky-500">
|
||||
You haven't created any Links Here
|
||||
</p>
|
||||
<br />
|
||||
<div className="text-center text-sky-900 text-sm flex items-baseline justify-center gap-1 w-full">
|
||||
<p>Start by creating a</p>{" "}
|
||||
<div
|
||||
onClick={() => {
|
||||
setModal({
|
||||
modal: "LINK",
|
||||
state: true,
|
||||
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-500 hover:bg-sky-400 duration-100 group"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPlus}
|
||||
className="w-5 h-5 group-hover:ml-9 absolute duration-100"
|
||||
/>
|
||||
<span className="block group-hover:opacity-0 text-right w-full duration-100">
|
||||
New Link
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -127,29 +127,41 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
leaveTo="transform opacity-0 -translate-y-3"
|
||||
>
|
||||
<Disclosure.Panel className="flex flex-col gap-1">
|
||||
{collections
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((e, i) => {
|
||||
return (
|
||||
<Link key={i} href={`/collections/${e.id}`}>
|
||||
<div
|
||||
className={`${
|
||||
active === `/collections/${e.id}`
|
||||
? "bg-sky-200"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className="w-6 h-6 drop-shadow"
|
||||
style={{ color: e.color }}
|
||||
/>
|
||||
{collections[0] ? (
|
||||
collections
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((e, i) => {
|
||||
return (
|
||||
<Link key={i} href={`/collections/${e.id}`}>
|
||||
<div
|
||||
className={`${
|
||||
active === `/collections/${e.id}`
|
||||
? "bg-sky-200"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className="w-6 h-6 drop-shadow"
|
||||
style={{ color: e.color }}
|
||||
/>
|
||||
|
||||
<p className="text-sky-600 truncate w-4/6">{e.name}</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<p className="text-sky-600 truncate w-full pr-7">
|
||||
{e.name}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div
|
||||
className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
|
||||
>
|
||||
<p className="text-gray-500 text-xs font-semibold truncate w-full pr-7">
|
||||
You Have No Collections...
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</Disclosure>
|
||||
|
|
@ -175,28 +187,40 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
leaveTo="transform opacity-0 -translate-y-3"
|
||||
>
|
||||
<Disclosure.Panel className="flex flex-col gap-1">
|
||||
{tags
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((e, i) => {
|
||||
return (
|
||||
<Link key={i} href={`/tags/${e.id}`}>
|
||||
<div
|
||||
className={`${
|
||||
active === `/tags/${e.id}`
|
||||
? "bg-sky-200"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faHashtag}
|
||||
className="w-4 h-4 text-sky-500 mt-1"
|
||||
/>
|
||||
{tags[0] ? (
|
||||
tags
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((e, i) => {
|
||||
return (
|
||||
<Link key={i} href={`/tags/${e.id}`}>
|
||||
<div
|
||||
className={`${
|
||||
active === `/tags/${e.id}`
|
||||
? "bg-sky-200"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faHashtag}
|
||||
className="w-4 h-4 text-sky-500 mt-1"
|
||||
/>
|
||||
|
||||
<p className="text-sky-600 truncate w-4/6">{e.name}</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<p className="text-sky-600 truncate w-full pr-7">
|
||||
{e.name}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div
|
||||
className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
|
||||
>
|
||||
<p className="text-gray-500 text-xs font-semibold truncate w-full pr-7">
|
||||
You Have No Tags...
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</Disclosure>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import SortDropdown from "@/components/SortDropdown";
|
|||
import useModalStore from "@/store/modals";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import NoLinksFound from "@/components/NoLinksFound";
|
||||
|
||||
export default function Index() {
|
||||
const { setModal } = useModalStore();
|
||||
|
|
@ -234,13 +235,17 @@ export default function Index() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
|
||||
{links
|
||||
.filter((e) => e.collectionId === Number(router.query.id))
|
||||
.map((e, i) => {
|
||||
return <LinkCard key={i} link={e} count={i} />;
|
||||
})}
|
||||
</div>
|
||||
{links[0] ? (
|
||||
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
|
||||
{links
|
||||
.filter((e) => e.collectionId === Number(router.query.id))
|
||||
.map((e, i) => {
|
||||
return <LinkCard key={i} link={e} count={i} />;
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<NoLinksFound />
|
||||
)}
|
||||
</div>
|
||||
</MainLayout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ export default function Dashboard() {
|
|||
</div>
|
||||
</Disclosure>
|
||||
) : (
|
||||
<div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-md">
|
||||
<div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
|
||||
<p className="text-center text-2xl text-sky-500">
|
||||
No Pinned Links
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import LinkCard from "@/components/LinkCard";
|
||||
import NoLinksFound from "@/components/NoLinksFound";
|
||||
import SortDropdown from "@/components/SortDropdown";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
|
|
@ -52,11 +53,15 @@ export default function Links() {
|
|||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
|
||||
{links.map((e, i) => {
|
||||
return <LinkCard key={i} link={e} count={i} />;
|
||||
})}
|
||||
</div>
|
||||
{links[0] ? (
|
||||
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
|
||||
{links.map((e, i) => {
|
||||
return <LinkCard key={i} link={e} count={i} />;
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<NoLinksFound />
|
||||
)}
|
||||
</div>
|
||||
</MainLayout>
|
||||
);
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue