style: change to neutral to handle new themes
This commit is contained in:
Trey Gordon
+258
-258
@@ -19,293 +19,293 @@ import ViewDropdown from "@/components/ViewDropdown";
|
|||||||
// import GridView from "@/components/LinkViews/Layouts/GridView";
|
// import GridView from "@/components/LinkViews/Layouts/GridView";
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const { collections } = useCollectionStore();
|
const { collections } = useCollectionStore();
|
||||||
const { links } = useLinkStore();
|
const { links } = useLinkStore();
|
||||||
const { tags } = useTagStore();
|
const { tags } = useTagStore();
|
||||||
|
|
||||||
const [numberOfLinks, setNumberOfLinks] = useState(0);
|
const [numberOfLinks, setNumberOfLinks] = useState(0);
|
||||||
|
|
||||||
const [showLinks, setShowLinks] = useState(3);
|
const [showLinks, setShowLinks] = useState(3);
|
||||||
|
|
||||||
useLinks({ pinnedOnly: true, sort: 0 });
|
useLinks({ pinnedOnly: true, sort: 0 });
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setNumberOfLinks(
|
setNumberOfLinks(
|
||||||
collections.reduce(
|
collections.reduce(
|
||||||
(accumulator, collection) =>
|
(accumulator, collection) =>
|
||||||
accumulator + (collection._count as any).links,
|
accumulator + (collection._count as any).links,
|
||||||
0
|
0
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}, [collections]);
|
}, [collections]);
|
||||||
|
|
||||||
const handleNumberOfLinksToShow = () => {
|
const handleNumberOfLinksToShow = () => {
|
||||||
if (window.innerWidth > 1900) {
|
if (window.innerWidth > 1900) {
|
||||||
setShowLinks(8);
|
setShowLinks(8);
|
||||||
} else if (window.innerWidth > 1280) {
|
} else if (window.innerWidth > 1280) {
|
||||||
setShowLinks(6);
|
setShowLinks(6);
|
||||||
} else if (window.innerWidth > 650) {
|
} else if (window.innerWidth > 650) {
|
||||||
setShowLinks(4);
|
setShowLinks(4);
|
||||||
} else setShowLinks(3);
|
} else setShowLinks(3);
|
||||||
};
|
};
|
||||||
|
|
||||||
const { width } = useWindowDimensions();
|
const { width } = useWindowDimensions();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
handleNumberOfLinksToShow();
|
handleNumberOfLinksToShow();
|
||||||
}, [width]);
|
}, [width]);
|
||||||
|
|
||||||
const importBookmarks = async (e: any, format: MigrationFormat) => {
|
const importBookmarks = async (e: any, format: MigrationFormat) => {
|
||||||
const file: File = e.target.files[0];
|
const file: File = e.target.files[0];
|
||||||
|
|
||||||
if (file) {
|
if (file) {
|
||||||
var reader = new FileReader();
|
var reader = new FileReader();
|
||||||
reader.readAsText(file, "UTF-8");
|
reader.readAsText(file, "UTF-8");
|
||||||
reader.onload = async function (e) {
|
reader.onload = async function (e) {
|
||||||
const load = toast.loading("Importing...");
|
const load = toast.loading("Importing...");
|
||||||
|
|
||||||
const request: string = e.target?.result as string;
|
const request: string = e.target?.result as string;
|
||||||
|
|
||||||
const body: MigrationRequest = {
|
const body: MigrationRequest = {
|
||||||
format,
|
format,
|
||||||
data: request,
|
data: request,
|
||||||
};
|
};
|
||||||
|
|
||||||
const response = await fetch("/api/v1/migration", {
|
const response = await fetch("/api/v1/migration", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: JSON.stringify(body),
|
body: JSON.stringify(body),
|
||||||
});
|
});
|
||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
|
||||||
toast.dismiss(load);
|
toast.dismiss(load);
|
||||||
|
|
||||||
toast.success("Imported the Bookmarks! Reloading the page...");
|
toast.success("Imported the Bookmarks! Reloading the page...");
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
location.reload();
|
location.reload();
|
||||||
}, 2000);
|
}, 2000);
|
||||||
};
|
};
|
||||||
reader.onerror = function (e) {
|
reader.onerror = function (e) {
|
||||||
console.log("Error:", e);
|
console.log("Error:", e);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const [newLinkModal, setNewLinkModal] = useState(false);
|
const [newLinkModal, setNewLinkModal] = useState(false);
|
||||||
|
|
||||||
const [viewMode, setViewMode] = useState<string>(
|
const [viewMode, setViewMode] = useState<string>(
|
||||||
localStorage.getItem("viewMode") || ViewMode.Card
|
localStorage.getItem("viewMode") || ViewMode.Card
|
||||||
);
|
);
|
||||||
|
|
||||||
const linkView = {
|
const linkView = {
|
||||||
[ViewMode.Card]: CardView,
|
[ViewMode.Card]: CardView,
|
||||||
// [ViewMode.Grid]: GridView,
|
// [ViewMode.Grid]: GridView,
|
||||||
[ViewMode.List]: ListView,
|
[ViewMode.List]: ListView,
|
||||||
};
|
};
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const LinkComponent = linkView[viewMode];
|
const LinkComponent = linkView[viewMode];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MainLayout>
|
<MainLayout>
|
||||||
<div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
|
<div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<PageHeader
|
<PageHeader
|
||||||
icon={"bi-house "}
|
icon={"bi-house "}
|
||||||
title={"Dashboard"}
|
title={"Dashboard"}
|
||||||
description={"A brief overview of your data"}
|
description={"A brief overview of your data"}
|
||||||
/>
|
/>
|
||||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<DashboardItem
|
|
||||||
name={collections.length === 1 ? "Collection" : "Collections"}
|
|
||||||
value={collections.length}
|
|
||||||
icon={"bi-folder"}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="divider xl:divider-horizontal"></div>
|
|
||||||
|
|
||||||
<DashboardItem
|
|
||||||
name={tags.length === 1 ? "Tag" : "Tags"}
|
|
||||||
value={tags.length}
|
|
||||||
icon={"bi-hash"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div className="flex gap-2 items-center">
|
|
||||||
<PageHeader
|
|
||||||
icon={"bi-clock-history"}
|
|
||||||
title={"Recent"}
|
|
||||||
description={"Recently added Links"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Link
|
|
||||||
href="/links"
|
|
||||||
className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
|
|
||||||
>
|
|
||||||
View All
|
|
||||||
<i className="bi-chevron-right text-sm"></i>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{ flex: "0 1 auto" }}
|
|
||||||
className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
|
|
||||||
>
|
|
||||||
{links[0] ? (
|
|
||||||
<div className="w-full">
|
|
||||||
<LinkComponent links={links.slice(0, showLinks)} />
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<DashboardItem
|
||||||
|
name={collections.length === 1 ? "Collection" : "Collections"}
|
||||||
|
value={collections.length}
|
||||||
|
icon={"bi-folder"}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="divider xl:divider-horizontal"></div>
|
||||||
|
|
||||||
|
<DashboardItem
|
||||||
|
name={tags.length === 1 ? "Tag" : "Tags"}
|
||||||
|
value={tags.length}
|
||||||
|
icon={"bi-hash"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<PageHeader
|
||||||
|
icon={"bi-clock-history"}
|
||||||
|
title={"Recent"}
|
||||||
|
description={"Recently added Links"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href="/links"
|
||||||
|
className="flex items-center text-sm text-neutral gap-2 cursor-pointer"
|
||||||
|
>
|
||||||
|
View All
|
||||||
|
<i className="bi-chevron-right text-sm"></i>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style={{ flex: "1 1 auto" }}
|
style={{ flex: "0 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 2xl:flex-row items-start 2xl:gap-2"
|
||||||
>
|
>
|
||||||
<p className="text-center text-2xl">
|
{links[0] ? (
|
||||||
View Your Recently Added Links Here!
|
<div className="w-full">
|
||||||
</p>
|
<LinkComponent links={links.slice(0, showLinks)} />
|
||||||
<p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
|
|
||||||
This section will view your latest added Links across every
|
|
||||||
Collections you have access to.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="text-center w-full mt-4 flex flex-wrap gap-4 justify-center">
|
|
||||||
<div
|
|
||||||
onClick={() => {
|
|
||||||
setNewLinkModal(true);
|
|
||||||
}}
|
|
||||||
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">
|
|
||||||
Add New Link
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="dropdown dropdown-bottom">
|
|
||||||
<div
|
|
||||||
tabIndex={0}
|
|
||||||
role="button"
|
|
||||||
className="inline-flex items-center gap-2 text-sm btn btn-outline btn-neutral"
|
|
||||||
id="import-dropdown"
|
|
||||||
>
|
|
||||||
<i className="bi-cloud-upload text-xl duration-100"></i>
|
|
||||||
<p>Import From</p>
|
|
||||||
</div>
|
</div>
|
||||||
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
|
) : (
|
||||||
<li>
|
<div
|
||||||
<label
|
style={{ flex: "1 1 auto" }}
|
||||||
tabIndex={0}
|
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"
|
||||||
role="button"
|
>
|
||||||
htmlFor="import-linkwarden-file"
|
<p className="text-center text-2xl">
|
||||||
title="JSON File"
|
View Your Recently Added Links Here!
|
||||||
>
|
</p>
|
||||||
From Linkwarden
|
<p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
|
||||||
<input
|
This section will view your latest added Links across every
|
||||||
type="file"
|
Collections you have access to.
|
||||||
name="photo"
|
</p>
|
||||||
id="import-linkwarden-file"
|
|
||||||
accept=".json"
|
|
||||||
className="hidden"
|
|
||||||
onChange={(e) =>
|
|
||||||
importBookmarks(e, MigrationFormat.linkwarden)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label
|
|
||||||
tabIndex={0}
|
|
||||||
role="button"
|
|
||||||
htmlFor="import-html-file"
|
|
||||||
title="HTML File"
|
|
||||||
>
|
|
||||||
From Bookmarks HTML file
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
name="photo"
|
|
||||||
id="import-html-file"
|
|
||||||
accept=".html"
|
|
||||||
className="hidden"
|
|
||||||
onChange={(e) =>
|
|
||||||
importBookmarks(e, MigrationFormat.htmlFile)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-between items-center">
|
<div className="text-center w-full mt-4 flex flex-wrap gap-4 justify-center">
|
||||||
<div className="flex gap-2 items-center">
|
<div
|
||||||
<PageHeader
|
onClick={() => {
|
||||||
icon={"bi-pin-angle"}
|
setNewLinkModal(true);
|
||||||
title={"Pinned"}
|
}}
|
||||||
description={"Your pinned Links"}
|
className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-violet-400 text-white"
|
||||||
/>
|
>
|
||||||
</div>
|
<i className="bi-plus-lg text-xl duration-100"></i>
|
||||||
<Link
|
<span className="group-hover:opacity-0 text-right duration-100">
|
||||||
href="/links/pinned"
|
Add New Link
|
||||||
className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
|
</span>
|
||||||
>
|
</div>
|
||||||
View All
|
|
||||||
<i className="bi-chevron-right text-sm "></i>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<div className="dropdown dropdown-bottom">
|
||||||
style={{ flex: "1 1 auto" }}
|
<div
|
||||||
className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
|
tabIndex={0}
|
||||||
>
|
role="button"
|
||||||
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
|
className="inline-flex items-center gap-2 text-sm btn btn-outline btn-neutral"
|
||||||
<div className="w-full">
|
id="import-dropdown"
|
||||||
<div
|
>
|
||||||
className={`grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5 w-full`}
|
<i className="bi-cloud-upload text-xl duration-100"></i>
|
||||||
>
|
<p>Import From</p>
|
||||||
{links
|
</div>
|
||||||
.filter((e) => e.pinnedBy && e.pinnedBy[0])
|
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
|
||||||
.map((e, i) => <LinkCard key={i} link={e} count={i} />)
|
<li>
|
||||||
.slice(0, showLinks)}
|
<label
|
||||||
</div>
|
tabIndex={0}
|
||||||
|
role="button"
|
||||||
|
htmlFor="import-linkwarden-file"
|
||||||
|
title="JSON File"
|
||||||
|
>
|
||||||
|
From Linkwarden
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
name="photo"
|
||||||
|
id="import-linkwarden-file"
|
||||||
|
accept=".json"
|
||||||
|
className="hidden"
|
||||||
|
onChange={(e) =>
|
||||||
|
importBookmarks(e, MigrationFormat.linkwarden)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label
|
||||||
|
tabIndex={0}
|
||||||
|
role="button"
|
||||||
|
htmlFor="import-html-file"
|
||||||
|
title="HTML File"
|
||||||
|
>
|
||||||
|
From Bookmarks HTML file
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
name="photo"
|
||||||
|
id="import-html-file"
|
||||||
|
accept=".html"
|
||||||
|
className="hidden"
|
||||||
|
onChange={(e) =>
|
||||||
|
importBookmarks(e, MigrationFormat.htmlFile)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<PageHeader
|
||||||
|
icon={"bi-pin-angle"}
|
||||||
|
title={"Pinned"}
|
||||||
|
description={"Your pinned Links"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href="/links/pinned"
|
||||||
|
className="flex items-center text-sm text-neutral gap-2 cursor-pointer"
|
||||||
|
>
|
||||||
|
View All
|
||||||
|
<i className="bi-chevron-right text-sm "></i>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style={{ flex: "1 1 auto" }}
|
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 2xl:flex-row items-start 2xl:gap-2"
|
||||||
>
|
>
|
||||||
<p className="text-center text-2xl">
|
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
|
||||||
Pin Your Favorite Links Here!
|
<div className="w-full">
|
||||||
</p>
|
<div
|
||||||
<p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
|
className={`grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5 w-full`}
|
||||||
You can Pin your favorite Links by clicking on the three dots on
|
>
|
||||||
each Link and clicking{" "}
|
{links
|
||||||
<span className="font-semibold">Pin to Dashboard</span>.
|
.filter((e) => e.pinnedBy && e.pinnedBy[0])
|
||||||
</p>
|
.map((e, i) => <LinkCard key={i} link={e} count={i} />)
|
||||||
|
.slice(0, showLinks)}
|
||||||
|
</div>
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
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>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
{newLinkModal ? (
|
||||||
</div>
|
<NewLinkModal onClose={() => setNewLinkModal(false)} />
|
||||||
{newLinkModal ? (
|
) : undefined}
|
||||||
<NewLinkModal onClose={() => setNewLinkModal(false)} />
|
</MainLayout>
|
||||||
) : undefined}
|
);
|
||||||
</MainLayout>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user