improved UI

pages/collections/[id].tsx

@@ -14,7 +14,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import { useSession } from "next-auth/react";
 import ProfilePhoto from "@/components/ProfilePhoto";
@@ -58,6 +58,10 @@ export default function () {
     setDeleteCollectionModal(!deleteCollectionModal);
   };
 
+  const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSortBy(event.target.value);
+  };
+
   useEffect(() => {
     setActiveCollection(
       collections.find((e) => e.id === Number(router.query.id))
@@ -120,7 +124,7 @@ export default function () {
               >
                 <div
                   onClick={toggleCollectionMembersModal}
-                  className="flex justify-end items-center w-fit ml-auto group cursor-pointer"
+                  className="flex justify-center sm:justify-end items-center w-fit mx-auto sm:mr-0 sm:ml-auto group cursor-pointer"
                 >
                   <div
                     className={`bg-sky-500 p-2 leading-3 select-none group-hover:bg-sky-400 duration-100 text-white rounded-full text-xs ${
@@ -173,7 +177,7 @@ export default function () {
 
                 {sortDropdown ? (
                   <SortLinkDropdown
-                    handleSortChange={(e) => setSortBy(e.target.value)}
+                    handleSortChange={handleSortChange}
                     sortBy={sortBy}
                     toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
                   />

pages/collections/index.tsx

@@ -81,10 +81,15 @@ export default function () {
     <MainLayout>
       <div className="p-5">
         <div className="flex gap-3 items-center justify-between mb-5">
-          <div className="flex gap-3 items-center">
-            <div className="flex gap-2 items-center">
-              <FontAwesomeIcon icon={faBox} className="w-5 h-5 text-sky-300" />
-              <p className="text-lg text-sky-900">All Collections</p>
+          <div className="flex gap-3 items-end">
+            <div className="flex gap-2">
+              <FontAwesomeIcon
+                icon={faBox}
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
+              />
+              <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">
+                All Collections
+              </p>
             </div>
             <div className="relative">
               <div

pages/dashboard.tsx

@@ -27,6 +27,8 @@ export default function () {
     setSortedCollections(
       collectionsWithLinkCount.sort((a, b) => b.linkCount - a.linkCount) as any
     );
+
+    // console.log(links.length);
   }, [collections]);
 
   return (
@@ -34,30 +36,33 @@ export default function () {
     <MainLayout>
       <div className="p-5">
         <div className="flex gap-3 items-center mb-5">
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-2">
             <FontAwesomeIcon
               icon={faChartSimple}
-              className="w-5 h-5 text-sky-300"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
             />
-            <p className="text-lg text-sky-900">Dashboard</p>
+            <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">
+              Dashboard
+            </p>
           </div>
         </div>
 
-        <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
+        <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10 bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent">
           <div className="flex items-baseline gap-2">
-            <p className="text-sky-500 font-bold text-6xl">{links.length}</p>
-            <p className="text-sky-900 text-xl">Links</p>
+            <p className="font-bold text-6xl">{links.length}</p>
+            <p className="text-sky-900 text-xl">
+              Links
+              {/* {links.length == 1 ? "Links" : "Link"} */}
+            </p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="text-sky-500 font-bold text-6xl">
-              {collections.length}
-            </p>
+            <p className="font-bold text-6xl">{collections.length}</p>
             <p className="text-sky-900 text-xl">Collections</p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="text-sky-500 font-bold text-6xl">{tags.length}</p>
+            <p className="font-bold text-6xl">{tags.length}</p>
             <p className="text-sky-900 text-xl">Tags</p>
           </div>
         </div>

pages/links.tsx

@@ -52,12 +52,14 @@ export default function Links() {
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
         <div className="flex gap-3 justify-between items-center">
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-2">
             <FontAwesomeIcon
               icon={faBookmark}
-              className="w-5 h-5 text-sky-300"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
             />
-            <p className="text-lg text-sky-900">All Links</p>
+            <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">
+              All Links
+            </p>
           </div>
 
           <div className="relative">
@@ -75,7 +77,7 @@ export default function Links() {
 
             {sortDropdown ? (
               <SortLinkDropdown
-                handleSortChange={(e) => setSortBy(e.target.value)}
+                handleSortChange={handleSortChange}
                 sortBy={sortBy}
                 toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
               />

pages/search.tsx

@@ -2,6 +2,7 @@ import Checkbox from "@/components/Checkbox";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import LinkList from "@/components/LinkList";
 import RadioButton from "@/components/RadioButton";
+import SortLinkDropdown from "@/components/SortLinkDropdown";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import useSearchSettingsStore from "@/store/search";
@@ -148,54 +149,11 @@ export default function Links() {
               </div>
 
               {sortDropdown ? (
-                <ClickAwayHandler
-                  onClickOutside={(e: Event) => {
-                    const target = e.target as HTMLInputElement;
-                    if (target.id !== "sort-dropdown") setSortDropdown(false);
-                  }}
-                  className="absolute top-8 right-0 shadow-md bg-gray-50 rounded-md p-2 z-10 border border-sky-100 w-48"
-                >
-                  <p className="mb-2 text-sky-900 text-center font-semibold">
-                    Sort by
-                  </p>
-                  <div className="flex flex-col gap-2">
-                    <RadioButton
-                      label="Name (A-Z)"
-                      state={sortBy === "Name (A-Z)"}
-                      onClick={handleSortChange}
-                    />
-
-                    <RadioButton
-                      label="Name (Z-A)"
-                      state={sortBy === "Name (Z-A)"}
-                      onClick={handleSortChange}
-                    />
-
-                    <RadioButton
-                      label="Title (A-Z)"
-                      state={sortBy === "Title (A-Z)"}
-                      onClick={handleSortChange}
-                    />
-
-                    <RadioButton
-                      label="Title (Z-A)"
-                      state={sortBy === "Title (Z-A)"}
-                      onClick={handleSortChange}
-                    />
-
-                    <RadioButton
-                      label="Date (Newest First)"
-                      state={sortBy === "Date (Newest First)"}
-                      onClick={handleSortChange}
-                    />
-
-                    <RadioButton
-                      label="Date (Oldest First)"
-                      state={sortBy === "Date (Oldest First)"}
-                      onClick={handleSortChange}
-                    />
-                  </div>
-                </ClickAwayHandler>
+                <SortLinkDropdown
+                  handleSortChange={handleSortChange}
+                  sortBy={sortBy}
+                  toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
+                />
               ) : null}
             </div>
           </div>

pages/tags/[id].tsx

@@ -5,8 +5,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
 import { ChangeEvent, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
-import RadioButton from "@/components/RadioButton";
-import ClickAwayHandler from "@/components/ClickAwayHandler";
 import { Tag } from "@prisma/client";
 import useTagStore from "@/store/tags";
 import SortLinkDropdown from "@/components/SortLinkDropdown";
@@ -70,12 +68,14 @@ export default function () {
       <div className="p-5 flex flex-col gap-5 w-full">
         <div className="flex gap-3 items-center justify-between">
           <div className="flex gap-3 items-center">
-            <div className="flex gap-2 items-center">
+            <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faHashtag}
-                className="w-5 h-5 text-sky-300"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
               />
-              <p className="text-lg text-sky-900">{activeTag?.name}</p>
+              <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">
+                {activeTag?.name}
+              </p>
             </div>
           </div>
 
@@ -94,7 +94,7 @@ export default function () {
 
             {sortDropdown ? (
               <SortLinkDropdown
-                handleSortChange={(e) => setSortBy(e.target.value)}
+                handleSortChange={handleSortChange}
                 sortBy={sortBy}
                 toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
               />