diff --git a/components/DashboardItem.tsx b/components/DashboardItem.tsx index 70ffd55..4ad8682 100644 --- a/components/DashboardItem.tsx +++ b/components/DashboardItem.tsx @@ -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 ( -
-
- +
+
+
-
-

{name}

-

{value}

+
+

{name}

+

{value}

); diff --git a/components/Navbar.tsx b/components/Navbar.tsx index c346752..5e9d27b 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -1,6 +1,4 @@ -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { signOut } from "next-auth/react"; -import { faPlus, faBars, faCaretDown } from "@fortawesome/free-solid-svg-icons"; import { useEffect, useState } from "react"; import ClickAwayHandler from "@/components/ClickAwayHandler"; import Sidebar from "@/components/Sidebar"; @@ -52,16 +50,16 @@ export default function Navbar() { const [uploadFileModal, setUploadFileModal] = useState(false); return ( -
+
- +
- +
@@ -70,11 +68,12 @@ export default function Navbar() { role="button" className="flex min-w-[3.4rem] items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2" > - - + + + + + +
    diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx new file mode 100644 index 0000000..b169feb --- /dev/null +++ b/components/PageHeader.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +export default function PageHeader({ + title, + description, + icon, +}: { + title: string; + description: string; + icon: string; +}) { + return ( +
    + +
    +

    {title}

    +

    {description}

    +
    +
    + ); +} diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx index b6a8d4c..42a858d 100644 --- a/components/ProfilePhoto.tsx +++ b/components/ProfilePhoto.tsx @@ -1,6 +1,4 @@ import React, { useEffect, useState } from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faUser } from "@fortawesome/free-solid-svg-icons"; import Image from "next/image"; type Props = { @@ -39,10 +37,7 @@ export default function ProfilePhoto({ {name ? ( {name.slice(0, 1)} ) : ( - + )}
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx index 3aed4a4..99d1497 100644 --- a/components/SearchBar.tsx +++ b/components/SearchBar.tsx @@ -1,5 +1,3 @@ -import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useEffect, useState } from "react"; import { useRouter } from "next/router"; import { toast } from "react-hot-toast"; @@ -23,9 +21,9 @@ export default function SearchBar({ placeholder }: Props) {
{ const storedValue = localStorage.getItem("collectionDisclosure"); return storedValue ? storedValue === "true" : true; - } + }, ); const { collections } = useCollectionStore(); @@ -42,7 +32,7 @@ export default function Sidebar({ className }: { className?: string }) { useEffect(() => { localStorage.setItem( "collectionDisclosure", - collectionDisclosure ? "true" : "false" + collectionDisclosure ? "true" : "false", ); }, [collectionDisclosure]); @@ -52,21 +42,19 @@ export default function Sidebar({ className }: { className?: string }) { return ( @@ -123,16 +102,14 @@ export default function Sidebar({ className }: { className?: string }) { onClick={() => { setCollectionDisclosure(!collectionDisclosure); }} - className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" + className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" > -

Collections

- - Collections

+ + > - + >

{e.name}

{e.isPublic ? ( - + > ) : undefined}
{e._count?.links} @@ -194,13 +169,14 @@ export default function Sidebar({ className }: { className?: string }) { onClick={() => { setTagDisclosure(!tagDisclosure); }} - className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" + className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" > -

Tags

- +

Tags

+ - - +

{e.name}

{e._count?.links} diff --git a/components/ToggleDarkMode.tsx b/components/ToggleDarkMode.tsx index 595ae2a..9024347 100644 --- a/components/ToggleDarkMode.tsx +++ b/components/ToggleDarkMode.tsx @@ -11,11 +11,7 @@ export default function ToggleDarkMode({ className }: Props) { const [theme, setTheme] = useState(localStorage.getItem("theme")); const handleToggle = (e: any) => { - if (e.target.checked) { - setTheme("dark"); - } else { - setTheme("light"); - } + setTheme(e.target.checked ? "dark" : "light"); }; useEffect(() => { @@ -36,27 +32,8 @@ export default function ToggleDarkMode({ className }: Props) { className="theme-controller" checked={localStorage.getItem("theme") === "light" ? false : true} /> - - {/* sun icon */} - - - - - - {/* moon icon */} - - - + +
); diff --git a/package.json b/package.json index 211f90e..10cb9b3 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@types/react-dom": "18.2.7", "axios": "^1.5.1", "bcrypt": "^5.1.0", + "bootstrap-icons": "^1.11.2", "colorthief": "^2.4.0", "crypto-js": "^4.2.0", "csstype": "^3.1.2", diff --git a/pages/_app.tsx b/pages/_app.tsx index eea08e4..17bc258 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,6 @@ import React from "react"; import "@/styles/globals.css"; +import 'bootstrap-icons/font/bootstrap-icons.css'; import { SessionProvider } from "next-auth/react"; import type { AppProps } from "next/app"; import Head from "next/head"; diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx index a51e8f2..349a223 100644 --- a/pages/collections/index.tsx +++ b/pages/collections/index.tsx @@ -1,10 +1,4 @@ import useCollectionStore from "@/store/collections"; -import { - faEllipsis, - faFolder, - faPlus, -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import CollectionCard from "@/components/CollectionCard"; import { useState } from "react"; import MainLayout from "@/layouts/MainLayout"; @@ -13,6 +7,7 @@ import SortDropdown from "@/components/SortDropdown"; import { Sort } from "@/types/global"; import useSort from "@/hooks/useSort"; import NewCollectionModal from "@/components/ModalContent/NewCollectionModal"; +import PageHeader from "@/components/PageHeader"; export default function Collections() { const { collections } = useCollectionStore(); @@ -28,24 +23,14 @@ export default function Collections() { return ( -
-
-
-
- -
-

- Your Collections -

- -

Collections you own

-
-
-
+
+ +
@@ -63,20 +48,15 @@ export default function Collections() { onClick={() => setNewCollectionModal(true)} >

New Collection

- +
{sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? ( <>
- + +

Other Collections diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 62e4d5b..352cff9 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -1,30 +1,20 @@ -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 LinkCard from "@/components/LinkViews/LinkComponents/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"; import { MigrationFormat, MigrationRequest } from "@/types/global"; import DashboardItem from "@/components/DashboardItem"; import NewLinkModal from "@/components/ModalContent/NewLinkModal"; +import PageHeader from "@/components/PageHeader"; export default function Dashboard() { const { collections } = useCollectionStore(); @@ -44,8 +34,8 @@ export default function Dashboard() { collections.reduce( (accumulator, collection) => accumulator + (collection._count as any).links, - 0 - ) + 0, + ), ); }, [collections]); @@ -105,24 +95,13 @@ export default function Dashboard() { return (

-
- -
-

Dashboard

- -

A brief overview of your data

-
-
- +
@@ -130,7 +109,7 @@ export default function Dashboard() {
@@ -138,25 +117,22 @@ export default function Dashboard() {
- -

Recently Added Links

+ +

Recent

View All - +
@@ -164,7 +140,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] ? (
{ 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" > - - - Create New Link + + + Add New Link
@@ -207,13 +180,10 @@ export default function Dashboard() {
- +

Import From

    @@ -266,18 +236,15 @@ export default function Dashboard() {
    - -

    Pinned Links

    + +

    Pinned

    View All - +
    diff --git a/pages/links/index.tsx b/pages/links/index.tsx index 29bf548..72e455f 100644 --- a/pages/links/index.tsx +++ b/pages/links/index.tsx @@ -4,6 +4,9 @@ import SortDropdown from "@/components/SortDropdown"; import useLinks from "@/hooks/useLinks"; import MainLayout from "@/layouts/MainLayout"; import useLinkStore from "@/store/links"; +import { Sort } from "@/types/global"; +import React, { useState } from "react"; +import PageHeader from "@/components/PageHeader"; import { Sort, ViewMode } from "@/types/global"; import { faLink } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -13,6 +16,7 @@ import DefaultView from "@/components/LinkViews/DefaultView"; import GridView from "@/components/LinkViews/GridView"; import ListView from "@/components/LinkViews/ListView"; + export default function Links() { const { links } = useLinkStore(); @@ -35,24 +39,18 @@ export default function Links() { return (
    -
    -
    - -
    -

    All Links

    - -

    Links from every Collections

    -
    -
    - -
    + +
    +
    + {links[0] ? ( ) : ( diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx index b7db42d..81a7252 100644 --- a/pages/links/pinned.tsx +++ b/pages/links/pinned.tsx @@ -3,6 +3,9 @@ import SortDropdown from "@/components/SortDropdown"; import useLinks from "@/hooks/useLinks"; import MainLayout from "@/layouts/MainLayout"; import useLinkStore from "@/store/links"; +import { Sort } from "@/types/global"; +import React, { useState } from "react"; +import PageHeader from "@/components/PageHeader"; import { Sort, ViewMode } from "@/types/global"; import { faThumbTack } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -34,22 +37,13 @@ export default function PinnedLinks() { return (
    -
    -
    - -
    -

    Pinned Links

    - -

    - Pinned Links from your Collections -

    -
    -
    - -
    + +
    +
    diff --git a/yarn.lock b/yarn.lock index 03b95c3..705ecd0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1979,6 +1979,11 @@ bl@^4.0.3: inherits "^2.0.4" readable-stream "^3.4.0" +bootstrap-icons@^1.11.2: + version "1.11.2" + resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.11.2.tgz#e1c75daec154e25958db04c4eb3cbda6041e7118" + integrity sha512-TgdiPv+IM9tgDb+dsxrnGIyocsk85d2M7T0qIgkvPedZeoZfyeG/j+yiAE4uHCEayKef2RP05ahQ0/e9Sv75Wg== + bowser@^2.11.0: version "2.11.0" resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"