xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

small styling improvement

This commit is contained in:
Daniel 2023-07-18 11:34:43 -04:00
parent 78f3d449bc
commit b37d695091
1 changed files with 54 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
pages/dashboard.tsx
View File

@ -107,14 +107,18 @@ export default function Dashboard() {
<p className="font-bold text-6xl bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent">
{collections.length}
</p>
<p className="text-sky-900 text-xl">Collections</p>
<p className="text-sky-900 text-xl">
{collections.length === 1 ? "Collection" : "Collections"}
</p>
</div>
<div className="flex items-baseline gap-2">
<p className="font-bold text-6xl bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent">
{tags.length}
</p>
<p className="text-sky-900 text-xl">Tags</p>
<p className="text-sky-900 text-xl">
{tags.length === 1 ? "Tag" : "Tags"}
</p>
</div>
</div>
@ -122,45 +126,57 @@ export default function Dashboard() {
<br />
<div className="flex flex-col 2xl:flex-row items-start justify-evenly 2xl:gap-2">
<Disclosure defaultOpen={linkPinDisclosure}>
<div className="flex flex-col gap-5 p-2 w-full mx-auto md:w-2/3">
<Disclosure.Button
onClick={() => {
setLinkPinDisclosure(!linkPinDisclosure);
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
>
<p className="text-sky-600 text-xl">Pinned Links</p>
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
<Disclosure defaultOpen={linkPinDisclosure}>
<div className="flex flex-col gap-5 p-2 w-full mx-auto md:w-2/3">
<Disclosure.Button
onClick={() => {
setLinkPinDisclosure(!linkPinDisclosure);
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
>
<p className="text-sky-600 text-xl">Pinned Links</p>
<div className="text-sky-600 flex items-center gap-2">
{linkPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
className={`w-4 h-4 text-sky-300 ${
linkPinDisclosure ? "rotate-reverse" : "rotate"
}`}
/>
</div>
</Disclosure.Button>
<div className="text-sky-600 flex items-center gap-2">
{linkPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
className={`w-4 h-4 text-sky-300 ${
linkPinDisclosure ? "rotate-reverse" : "rotate"
}`}
/>
</div>
</Disclosure.Button>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform opacity-0 -translate-y-3"
enterTo="transform opacity-100 translate-y-0"
leave="transition duration-100 ease-out"
leaveFrom="transform opacity-100 translate-y-0"
leaveTo="transform opacity-0 -translate-y-3"
>
<Disclosure.Panel className="grid grid-cols-1 xl:grid-cols-2 gap-5 w-full">
{links
.filter((e) => e.pinnedBy && e.pinnedBy[0])
.map((e, i) => (
<LinkCard key={i} link={e} count={i} />
))}
</Disclosure.Panel>
</Transition>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform opacity-0 -translate-y-3"
enterTo="transform opacity-100 translate-y-0"
leave="transition duration-100 ease-out"
leaveFrom="transform opacity-100 translate-y-0"
leaveTo="transform opacity-0 -translate-y-3"
>
<Disclosure.Panel className="grid grid-cols-1 xl:grid-cols-2 gap-5 w-full">
{links
.filter((e) => e.pinnedBy && e.pinnedBy[0])
.map((e, i) => (
<LinkCard key={i} link={e} count={i} />
))}
</Disclosure.Panel>
</Transition>
</div>
</Disclosure>
) : (
<div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-md">
<p className="text-center text-2xl text-sky-500">
No Pinned Links
</p>
<p className="text-center text-sky-900 text-sm">
You can Pin Links by clicking on the three dots on each Link and
clicking "Pin to Dashboard."
</p>
</div>
</Disclosure>
)}
{/* <Disclosure defaultOpen={collectionPinDisclosure}>
<div className="flex flex-col gap-5 p-2 w-full">