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