better looking dashboard
This commit is contained in:
daniel31x13
parent
518b94b1f4
commit
3dfbccaf23
|
|
@ -0,0 +1,29 @@
|
|||
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
value: number;
|
||||
icon: IconProp;
|
||||
};
|
||||
|
||||
export default function dashboardItem({ name, value, icon }: Props) {
|
||||
return (
|
||||
<div className="flex gap-5 items-end">
|
||||
<div className="p-4 h-full bg-sky-500 bg-opacity-20 dark:bg-opacity-10 rounded-xl select-none">
|
||||
<FontAwesomeIcon
|
||||
icon={icon}
|
||||
className="w-8 h-8 text-sky-500 dark:text-sky-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center">
|
||||
<p className="text-gray-500 dark:text-gray-400 text-sm tracking-wider">
|
||||
{name}
|
||||
</p>
|
||||
<p className="font-thin text-5xl text-sky-500 dark:text-sky-500">
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -20,6 +20,8 @@ import {
|
|||
} from "@fortawesome/free-brands-svg-icons";
|
||||
|
||||
export default function SettingsSidebar({ className }: { className?: string }) {
|
||||
const LINKWARDEN_VERSION = "v2.1.0";
|
||||
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const router = useRouter();
|
||||
|
|
@ -136,6 +138,13 @@ export default function SettingsSidebar({ className }: { className?: string }) {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<Link
|
||||
href={`https://github.com/linkwarden/linkwarden/releases/tag/${LINKWARDEN_VERSION}`}
|
||||
target="_blank"
|
||||
className="dark:text-gray-300 text-gray-500 text-sm ml-2 hover:opacity-50 duration-100"
|
||||
>
|
||||
Linkwarden {LINKWARDEN_VERSION}
|
||||
</Link>
|
||||
<Link href="https://docs.linkwarden.app" target="_blank">
|
||||
<div
|
||||
className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
|
|
|
|||
|
|
@ -58,9 +58,9 @@ export default function MainLayout({ children }: Props) {
|
|||
</div>
|
||||
|
||||
<div
|
||||
className={`w-full flex flex-col min-h-screen lg:ml-64 xl:ml-80 ${
|
||||
showAnnouncement ? "mt-10" : ""
|
||||
}`}
|
||||
className={`w-full flex flex-col min-h-${
|
||||
showAnnouncement ? "full" : "screen"
|
||||
} lg:ml-64 xl:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
|
||||
>
|
||||
<Navbar />
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "linkwarden",
|
||||
"version": "1.0.0",
|
||||
"version": "2.1.0",
|
||||
"main": "index.js",
|
||||
"repository": "https://github.com/Daniel31x13/link-warden.git",
|
||||
"author": "Daniel31X13 <daniel31x13@gmail.com>",
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default function Collections() {
|
|||
Your Collections
|
||||
</p>
|
||||
|
||||
<p className="capitalize text-black dark:text-white">
|
||||
<p className="text-black dark:text-white">
|
||||
Collections you own
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -150,7 +150,7 @@ export default function Collections() {
|
|||
Other Collections
|
||||
</p>
|
||||
|
||||
<p className="capitalize text-black dark:text-white">
|
||||
<p className="text-black dark:text-white">
|
||||
Shared collections you're a member of
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ import {
|
|||
faChevronRight,
|
||||
faClockRotateLeft,
|
||||
faFileImport,
|
||||
faFolder,
|
||||
faHashtag,
|
||||
faLink,
|
||||
faThumbTack,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
|
@ -22,6 +25,7 @@ import useModalStore from "@/store/modals";
|
|||
import { toast } from "react-hot-toast";
|
||||
import { MigrationFormat, MigrationRequest } from "@/types/global";
|
||||
import ClickAwayHandler from "@/components/ClickAwayHandler";
|
||||
import DashboardItem from "@/components/DashboardItem";
|
||||
|
||||
export default function Dashboard() {
|
||||
const { collections } = useCollectionStore();
|
||||
|
|
@ -118,44 +122,47 @@ export default function Dashboard() {
|
|||
return (
|
||||
<MainLayout>
|
||||
<div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="flex gap-2">
|
||||
<FontAwesomeIcon
|
||||
icon={faChartSimple}
|
||||
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
|
||||
/>
|
||||
<p className="sm:text-4xl text-3xl text-black dark:text-white font-thin">
|
||||
<div className="flex items-center gap-3">
|
||||
<FontAwesomeIcon
|
||||
icon={faChartSimple}
|
||||
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-3xl capitalize text-black dark:text-white font-thin">
|
||||
Dashboard
|
||||
</p>
|
||||
|
||||
<p className="text-black dark:text-white">
|
||||
A brief overview of your data
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row md:items-center gap-5">
|
||||
<div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
|
||||
<p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
|
||||
{numberOfLinks}
|
||||
</p>
|
||||
<p className="text-black dark:text-white text-xl">
|
||||
{numberOfLinks === 1 ? "Link" : "Links"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-sky-100 dark:border-neutral-700 bg-gray-100 dark:bg-neutral-800">
|
||||
<DashboardItem
|
||||
name={numberOfLinks === 1 ? "Link" : "Links"}
|
||||
value={numberOfLinks}
|
||||
icon={faLink}
|
||||
/>
|
||||
|
||||
<div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
|
||||
<p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
|
||||
{collections.length}
|
||||
</p>
|
||||
<p className="text-black dark:text-white text-xl">
|
||||
{collections.length === 1 ? "Collection" : "Collections"}
|
||||
</p>
|
||||
</div>
|
||||
<hr className="border-sky-100 dark:border-neutral-700 md:hidden my-5" />
|
||||
<div className="h-full border-1 border-l border-sky-100 dark:border-neutral-700 hidden md:block"></div>
|
||||
|
||||
<div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
|
||||
<p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
|
||||
{tags.length}
|
||||
</p>
|
||||
<p className="text-black dark:text-white text-xl">
|
||||
{tags.length === 1 ? "Tag" : "Tags"}
|
||||
</p>
|
||||
<DashboardItem
|
||||
name={collections.length === 1 ? "Collection" : "Collections"}
|
||||
value={collections.length}
|
||||
icon={faFolder}
|
||||
/>
|
||||
|
||||
<hr className="border-sky-100 dark:border-neutral-700 md:hidden my-5" />
|
||||
<div className="h-full border-1 border-r border-sky-100 dark:border-neutral-700 hidden md:block"></div>
|
||||
|
||||
<DashboardItem
|
||||
name={tags.length === 1 ? "Tag" : "Tags"}
|
||||
value={tags.length}
|
||||
icon={faHashtag}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default function Links() {
|
|||
All Links
|
||||
</p>
|
||||
|
||||
<p className="capitalize text-black dark:text-white">
|
||||
<p className="text-black dark:text-white">
|
||||
Links from every Collections
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -176,10 +176,6 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.sky-shadow {
|
||||
box-shadow: 0px 0px 3px #0ea5e9;
|
||||
}
|
||||
|
||||
.primary-btn-gradient {
|
||||
box-shadow: inset 0px -10px 10px #0071b7;
|
||||
}
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue