update homepage icons

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 (
-    <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>
   );

pages/dashboard.tsx

@@ -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>