update homepage icons
This commit is contained in:
Yee Jia Wei
parent
9119402dac
commit
04ede17bfd
|
|
@ -1,21 +1,20 @@
|
|||
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
type Props = {
|
||||
export default function dashboardItem({
|
||||
name,
|
||||
value,
|
||||
icon,
|
||||
}: {
|
||||
name: string;
|
||||
value: number;
|
||||
icon: IconProp;
|
||||
};
|
||||
|
||||
export default function dashboardItem({ name, value, icon }: Props) {
|
||||
icon: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex gap-4 items-end">
|
||||
<div className="p-4 bg-primary/20 rounded-xl select-none">
|
||||
<FontAwesomeIcon icon={icon} className="w-8 h-8 text-primary" />
|
||||
<div className="flex items-center">
|
||||
<div className="w-20 aspect-square flex justify-center items-center bg-primary/20 rounded-xl select-none">
|
||||
<i className={`${icon} text-primary text-4xl drop-shadow`}></i>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center">
|
||||
<p className="text-neutral text-sm tracking-wider">{name}</p>
|
||||
<p className="font-thin text-6xl text-primary mt-2">{value}</p>
|
||||
<div className="ml-4 flex flex-col justify-center">
|
||||
<p className="text-neutral text-xs tracking-wider">{name}</p>
|
||||
<p className="font-thin text-6xl text-primary mt-0.5">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,24 +1,12 @@
|
|||
import useCollectionStore from "@/store/collections";
|
||||
import {
|
||||
faChartSimple,
|
||||
faChevronRight,
|
||||
faClockRotateLeft,
|
||||
faFileImport,
|
||||
faFolder,
|
||||
faHashtag,
|
||||
faLink,
|
||||
faThumbTack,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
import useLinkStore from "@/store/links";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import useTagStore from "@/store/tags";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
import LinkCard from "@/components/LinkCard";
|
||||
import { useEffect, useState } from "react";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import Link from "next/link";
|
||||
import useWindowDimensions from "@/hooks/useWindowDimensions";
|
||||
import { faPlus } from "@fortawesome/free-solid-svg-icons";
|
||||
import React from "react";
|
||||
import useModalStore from "@/store/modals";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
|
@ -44,8 +32,8 @@ export default function Dashboard() {
|
|||
collections.reduce(
|
||||
(accumulator, collection) =>
|
||||
accumulator + (collection._count as any).links,
|
||||
0
|
||||
)
|
||||
0,
|
||||
),
|
||||
);
|
||||
}, [collections]);
|
||||
|
||||
|
|
@ -106,10 +94,7 @@ export default function Dashboard() {
|
|||
<MainLayout>
|
||||
<div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<FontAwesomeIcon
|
||||
icon={faChartSimple}
|
||||
className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
|
||||
/>
|
||||
<i className="bi-house text-primary text-3xl sm:text-4xl drop-shadow"></i>
|
||||
<div>
|
||||
<p className="text-3xl capitalize font-thin">Dashboard</p>
|
||||
|
||||
|
|
@ -122,7 +107,7 @@ export default function Dashboard() {
|
|||
<DashboardItem
|
||||
name={numberOfLinks === 1 ? "Link" : "Links"}
|
||||
value={numberOfLinks}
|
||||
icon={faLink}
|
||||
icon={"bi-link-45deg"}
|
||||
/>
|
||||
|
||||
<div className="divider md:divider-horizontal"></div>
|
||||
|
|
@ -130,7 +115,7 @@ export default function Dashboard() {
|
|||
<DashboardItem
|
||||
name={collections.length === 1 ? "Collection" : "Collections"}
|
||||
value={collections.length}
|
||||
icon={faFolder}
|
||||
icon={"bi-folder"}
|
||||
/>
|
||||
|
||||
<div className="divider md:divider-horizontal"></div>
|
||||
|
|
@ -138,25 +123,22 @@ export default function Dashboard() {
|
|||
<DashboardItem
|
||||
name={tags.length === 1 ? "Tag" : "Tags"}
|
||||
value={tags.length}
|
||||
icon={faHashtag}
|
||||
icon={"bi-hash"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex gap-2 items-center">
|
||||
<FontAwesomeIcon
|
||||
icon={faClockRotateLeft}
|
||||
className="w-5 h-5 text-primary drop-shadow"
|
||||
/>
|
||||
<p className="text-2xl">Recently Added Links</p>
|
||||
<i className="bi-clock-history text-primary text-2xl drop-shadow"></i>
|
||||
<p className="text-2xl">Recent</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/links"
|
||||
className="flex items-center gap-2 cursor-pointer"
|
||||
className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
|
||||
>
|
||||
View All
|
||||
<FontAwesomeIcon icon={faChevronRight} className={`w-4 h-4`} />
|
||||
<i className="bi-chevron-right text-sm "></i>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
|
@ -164,7 +146,7 @@ export default function Dashboard() {
|
|||
style={{ flex: "0 1 auto" }}
|
||||
className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
|
||||
>
|
||||
{links[0] ? (
|
||||
{false && links[0] ? (
|
||||
<div className="w-full">
|
||||
<div
|
||||
className={`grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
|
||||
|
|
@ -192,14 +174,11 @@ export default function Dashboard() {
|
|||
onClick={() => {
|
||||
setNewLinkModal(true);
|
||||
}}
|
||||
className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group"
|
||||
className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-accent text-white"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPlus}
|
||||
className="w-5 h-5 left-4 group-hover:ml-[4rem] absolute duration-100"
|
||||
/>
|
||||
<span className="group-hover:opacity-0 text-right w-full duration-100">
|
||||
Create New Link
|
||||
<i className="bi-plus text-xl duration-100"></i>
|
||||
<span className="group-hover:opacity-0 text-right duration-100">
|
||||
Add New Link
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -207,13 +186,10 @@ export default function Dashboard() {
|
|||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="flex gap-2 text-sm btn btn-outline btn-neutral group"
|
||||
className="inline-flex items-center gap-2 text-sm btn btn-outline btn-neutral"
|
||||
id="import-dropdown"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFileImport}
|
||||
className="w-5 h-5 duration-100"
|
||||
/>
|
||||
<i className="bi-cloud-upload text-xl duration-100"></i>
|
||||
<p>Import From</p>
|
||||
</div>
|
||||
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
|
||||
|
|
@ -266,18 +242,15 @@ export default function Dashboard() {
|
|||
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex gap-2 items-center">
|
||||
<FontAwesomeIcon
|
||||
icon={faThumbTack}
|
||||
className="w-5 h-5 text-primary drop-shadow"
|
||||
/>
|
||||
<p className="text-2xl">Pinned Links</p>
|
||||
<i className="bi-pin-angle text-primary text-2xl drop-shadow"></i>
|
||||
<p className="text-2xl">Pinned</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/links/pinned"
|
||||
className="flex items-center gap-2 cursor-pointer"
|
||||
className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
|
||||
>
|
||||
View All
|
||||
<FontAwesomeIcon icon={faChevronRight} className={`w-4 h-4`} />
|
||||
<i className="bi-chevron-right text-sm "></i>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue