feat: improved Links UI

components/LinkList.tsx

@@ -2,13 +2,14 @@ import { ExtendedLink } from "@/types/global";
 import {
   faFolder,
   faArrowUpRightFromSquare,
-  faCaretRight,
   faEllipsis,
-  faFileImage,
-  faFilePdf,
+  faHeart,
 } from "@fortawesome/free-solid-svg-icons";
+import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
+import Image from "next/image";
 
 export default function ({
   link,
@@ -27,16 +28,27 @@ export default function ({
   });
 
   return (
-    <div className="border border-sky-100 mb-5 bg-gray-100 p-5 rounded">
-      <div className="flex justify-between h-full">
+    <div className="border border-sky-100 mb-5 bg-gray-100 p-5 rounded flex items-center gap-5 group/item">
+      <Image
+        src={`http://icons.duckduckgo.com/ip3/${shortendURL}.ico`}
+        width={100}
+        height={100}
+        alt=""
+        className="blur-sm opacity-80 group-hover/item:opacity-100 duration-100"
+        draggable="false"
+      />
+      <div className="flex justify-between gap-5 w-full">
         <div>
           <div className="flex items-baseline gap-1">
             <p className="text-sm text-sky-300 font-bold">{count + 1}.</p>
             <p className="text-lg text-sky-600">{link.name}</p>
+            {link.isFavorites ? (
+              <FontAwesomeIcon icon={faHeart} className="w-3 text-red-600" />
+            ) : null}
           </div>
           <p className="text-sky-400 text-sm font-medium">{link.title}</p>
           <div className="flex gap-3 items-center flex-wrap my-3">
-            <div className="flex items-center gap-1 cursor-pointer">
+            <div className="flex items-center gap-1 cursor-pointer hover:bg-gray-50 duration-100 py-1 px-2 text-sm rounded hover:outline outline-sky-100 outline-1">
               <FontAwesomeIcon icon={faFolder} className="w-4 text-sky-300" />
               <p className="text-sky-900">{link.collection.name}</p>
             </div>
@@ -44,25 +56,21 @@ export default function ({
               {link.tags.map((e, i) => (
                 <p
                   key={i}
-                  className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer"
+                  className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:bg-sky-100 duration-100"
                 >
                   # {e.name}
                 </p>
               ))}
             </div>
           </div>
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-2 items-center flex-wrap">
             <p className="text-gray-500">{formattedDate}</p>
-            <FontAwesomeIcon
-              icon={faCaretRight}
-              className="w-3 text-gray-400"
-            />
-            <a href={link.url} className="group">
+            <a href={link.url} target="_blank" className="group/url">
               <div className="text-gray-500 font-bold flex items-center gap-1">
                 <p>{shortendURL}</p>
                 <FontAwesomeIcon
                   icon={faArrowUpRightFromSquare}
-                  className="w-3 opacity-0 group-hover:opacity-100 duration-75"
+                  className="w-3 opacity-0 group-hover/url:opacity-100 duration-75"
                 />
               </div>
             </a>
@@ -87,36 +95,34 @@ export default function ({
                   link.screenshotPath
                 )}`}
                 onMouseEnter={() => setArchiveLabel("Screenshot")}
+                target="_blank"
               >
                 <FontAwesomeIcon
                   icon={faFileImage}
-                  className="w-8 h-8 text-sky-600 cursor-pointer"
+                  className="w-8 h-8 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
                 />
               </a>
               <a
                 href={`/api/archives/${link.collectionId}/${encodeURIComponent(
                   link.pdfPath
                 )}`}
+                target="_blank"
                 onMouseEnter={() => setArchiveLabel("PDF")}
               >
                 <FontAwesomeIcon
                   icon={faFilePdf}
-                  className="w-8 h-8 text-sky-600 cursor-pointer"
+                  className="w-8 h-8 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
                 />
               </a>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
-                className="w-8 h-8 text-sky-600 cursor-pointer"
+                className="w-8 h-8 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
                 onMouseEnter={() => setArchiveLabel("Web.archive.org")}
               />
             </div>
           </div>
         </div>
       </div>
-      {/* <br />
-      <hr />
-      <br />
-      <p className="break-words text-sm">{JSON.stringify(link)}</p> */}
     </div>
   );
 }

components/Navbar.tsx

@@ -91,7 +91,7 @@ export default function () {
         </div>
 
         {linkModal ? (
-          <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in">
+          <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-10">
             <ClickAwayHandler
               onClickOutside={toggleLinkModal}
               className="w-fit mx-auto"

components/Sidebar/SidebarItem.tsx

@@ -12,7 +12,7 @@ interface SidebarItemProps {
 export default function ({ text, icon, path }: SidebarItemProps) {
   return (
     <Link href={path}>
-      <div className="hover:bg-gray-50 duration-100 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+      <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
         <FontAwesomeIcon icon={icon} className="w-4 text-sky-300" />
         <p className="text-sky-900">{text}</p>
       </div>

components/Sidebar/index.tsx

@@ -43,7 +43,7 @@ export default function () {
   };
 
   return (
-    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-5 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border">
+    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-5 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border z-10">
       <div className="flex gap-3 items-center mb-5 p-3 cursor-pointer w-fit text-gray-600">
         <FontAwesomeIcon icon={faUserCircle} className="h-8" />
         <div className="flex items-center gap-1">
@@ -53,14 +53,14 @@ export default function () {
       </div>
 
       <Link href="links">
-        <div className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
           <FontAwesomeIcon icon={faBookmark} className="w-4 text-sky-300" />
           <p>All Links</p>
         </div>
       </Link>
 
       <Link href="/collections">
-        <div className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
           <FontAwesomeIcon icon={faBox} className="w-4 text-sky-300" />
           <p>All Collections</p>
         </div>

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: ["icons.duckduckgo.com"],
+  },
 };
 
 module.exports = nextConfig;