minor changes and improvements

pages/dashboard.tsx

@@ -4,9 +4,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import useTagStore from "@/store/tags";
-import LinkItem from "@/components/Dashboard/LinkItem";
+import LinkCard from "@/components/LinkCard";
 import Link from "next/link";
-import CollectionItem from "@/components/Dashboard/CollectionItem";
+import CollectionCard from "@/components/CollectionCard";
 import { useEffect, useState } from "react";
 
 export default function Dashboard() {
@@ -68,7 +68,7 @@ export default function Dashboard() {
         </div>
 
         <div className="flex flex-col 2xl:flex-row items-start justify-evenly gap-5">
-          <div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
+          <div className="flex flex-col gap-5 p-2 w-full">
             <div className="flex justify-between gap-2 items-baseline">
               <p className="text-sky-600 text-xl mb-2">Recently added Links</p>
               <Link href="/links">
@@ -89,11 +89,11 @@ export default function Dashboard() {
               )
               .slice(0, 5)
               .map((e, i) => (
-                <LinkItem key={i} link={e} count={i} />
+                <LinkCard key={i} link={e} count={i} />
               ))}
           </div>
 
-          <div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
+          <div className="flex flex-col gap-5 p-2 w-full">
             <div className="flex justify-between gap-2 items-baseline">
               <p className="text-sky-600 text-xl mb-2">Top Collections</p>
               <Link href="/collections">
@@ -107,14 +107,11 @@ export default function Dashboard() {
               </Link>
             </div>
             {sortedCollections.map((e, i) => (
-              <CollectionItem key={i} collection={e} />
+              <CollectionCard key={i} collection={e} />
             ))}
           </div>
 
-          <div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
-            <div className="flex justify-between gap-2 items-baseline">
-              <p className="text-sky-600 text-xl mb-2">Top Tags</p>
-            </div>
+          <div className="flex flex-col gap-5 p-2 w-full">
             <div className="flex gap-2 flex-wrap">
               {tags.slice(0, 19).map((e, i) => (
                 <Link

pages/links.tsx

@@ -2,7 +2,7 @@ import LinkCard from "@/components/LinkCard";
 import SortLinkDropdown from "@/components/SortLinkDropdown";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
-import { faBookmark, faSort } from "@fortawesome/free-solid-svg-icons";
+import { faLink, faSort } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ChangeEvent, useEffect, useState } from "react";
 
@@ -52,7 +52,7 @@ export default function Links() {
         <div className="flex gap-3 justify-between items-center">
           <div className="flex gap-2">
             <FontAwesomeIcon
-              icon={faBookmark}
+              icon={faLink}
               className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
             />
             <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">