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

refactor components

Browse Source
This commit is contained in:
daniel31x13
2024-05-24 19:13:04 -04:00
parent d262041f33
commit f310cd79ad
14 changed files with 74 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/dashboard.tsx
+33 -31
View File
@@ -41,12 +41,14 @@ export default function Dashboard() {
const handleNumberOfLinksToShow = () => {
if (window.innerWidth > 1900) {
setShowLinks(10);
} else if (window.innerWidth > 1500) {
setShowLinks(8);
} else if (window.innerWidth > 1280) {
} else if (window.innerWidth > 880) {
setShowLinks(6);
} else if (window.innerWidth > 650) {
} else if (window.innerWidth > 550) {
setShowLinks(4);
} else setShowLinks(3);
} else setShowLinks(2);
};
const { width } = useWindowDimensions();
@@ -120,28 +122,30 @@ export default function Dashboard() {
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
</div>
<div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-5 border border-neutral-content bg-base-200">
<DashboardItem
name={numberOfLinks === 1 ? "Link" : "Links"}
value={numberOfLinks}
icon={"bi-link-45deg"}
/>
<div>
<div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
<DashboardItem
name={numberOfLinks === 1 ? "Link" : "Links"}
value={numberOfLinks}
icon={"bi-link-45deg"}
/>
<div className="divider xl:divider-horizontal"></div>
<div className="divider xl:divider-horizontal"></div>
<DashboardItem
name={collections.length === 1 ? "Collection" : "Collections"}
value={collections.length}
icon={"bi-folder"}
/>
<DashboardItem
name={collections.length === 1 ? "Collection" : "Collections"}
value={collections.length}
icon={"bi-folder"}
/>
<div className="divider xl:divider-horizontal"></div>
<div className="divider xl:divider-horizontal"></div>
<DashboardItem
name={tags.length === 1 ? "Tag" : "Tags"}
value={tags.length}
icon={"bi-hash"}
/>
<DashboardItem
name={tags.length === 1 ? "Tag" : "Tags"}
value={tags.length}
icon={"bi-hash"}
/>
</div>
</div>
<div className="flex justify-between items-center">
@@ -162,7 +166,7 @@ export default function Dashboard() {
</div>
<div
style={{ flex: "0 1 auto" }}
style={{ flex: links[0] ? "0 1 auto" : "1 1 auto" }}
className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
>
{links[0] ? (
@@ -170,10 +174,7 @@ export default function Dashboard() {
<LinkComponent links={links.slice(0, showLinks)} />
</div>
) : (
<div
style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
>
<div className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200">
<p className="text-center text-2xl">
View Your Recently Added Links Here!
</p>
@@ -189,8 +190,8 @@ export default function Dashboard() {
}}
className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-violet-400 text-white"
>
<i className="bi-plus-lg text-xl duration-100"></i>
<span className="group-hover:opacity-0 text-right duration-100">
<i className="bi-plus-lg text-xl"></i>
<span className="group-hover:opacity-0 text-right">
Add New Link
</span>
</div>
@@ -200,7 +201,7 @@ export default function Dashboard() {
tabIndex={0}
role="button"
onMouseDown={dropdownTriggerer}
className="inline-flex items-center gap-2 text-sm btn btn-outline btn-neutral"
className="inline-flex items-center gap-2 text-sm btn bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30 hover:border hover:border-neutral/30"
id="import-dropdown"
>
<i className="bi-cloud-upload text-xl duration-100"></i>
@@ -286,12 +287,13 @@ export default function Dashboard() {
) : (
<div
style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
className="flex flex-col gap-2 justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
>
<i className="bi-pin mx-auto text-6xl text-primary"></i>
<p className="text-center text-2xl">
Pin Your Favorite Links Here!
</p>
<p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
<p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm">
You can Pin your favorite Links by clicking on the three dots on
each Link and clicking{" "}
<span className="font-semibold">Pin to Dashboard</span>.