many more improvements

components/CollectionCard.tsx

@@ -4,10 +4,11 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { faChevronRight, faUser } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { ExtendedCollection } from "@/types/global";
 import useLinkStore from "@/store/links";
+import ImageWithFallback from "./ImageWithFallback";
 
 export default function ({ collection }: { collection: ExtendedCollection }) {
   const { links } = useLinkStore();
@@ -18,47 +19,55 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
   });
 
   return (
-    <Link href={`/collections/${collection.id}`}>
-      <div className="p-5 bg-gray-100 min-h-[12rem] rounded-md border-sky-100 border-solid border flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100">
-        <div>
-          <div className="flex justify-between text-sky-600 items-center">
-            <p className="text-lg w-max font-bold">{collection.name}</p>
-            <FontAwesomeIcon
-              icon={faChevronRight}
-              className="w-3 h-3 text-gray-500"
-            />
+    <div className="p-5 bg-gradient-to-tr from-sky-100 self-stretch to-gray-100 min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none group">
+      <Link href={`/collections/${collection.id}`}>
+        <div className="flex flex-col gap-2 justify-between h-full">
+          <div>
+            <div className="flex justify-between text-sky-600 items-center mb-2">
+              <p className="text-2xl w-max font-bold capitalize">
+                {collection.name}
+              </p>
+              <FontAwesomeIcon
+                icon={faChevronRight}
+                className="w-3 h-3 group-hover:w-5 group-hover:h-5 duration-100 text-gray-500"
+              />
+            </div>
+            <p className="text-gray-500">{collection.description}</p>
           </div>
-          <p className="text-sky-400">{collection.description}</p>
-        </div>
-        <div className="flex justify-between items-center">
-          <div className="text-sky-400 flex items-center w-full">
-            {collection.members
-              .map((e, i) => {
-                return (
-                  <img
-                    src={`/api/avatar/${e.userId}`}
-                    className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3"
-                    alt=""
-                  />
-                );
-              })
-              .reverse()
-              .slice(0, 3)}
-            {collection.members.length - 3 > 0 ? (
-              <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3">
-                +{collection.members.length - 3}
-              </div>
-            ) : null}
-          </div>
-          <div className="text-right w-full">
-            <p className="text-sky-500 font-bold">
-              {links.filter((e) => e.collectionId === collection.id).length}{" "}
-              Links
-            </p>
-            <p className="text-sky-300 font-bold text-sm">{formattedDate}</p>
+          <div className="flex justify-between items-center">
+            <div className="text-sky-400 flex items-center w-full">
+              {collection.members
+                .map((e, i) => {
+                  return (
+                    <ImageWithFallback
+                      key={i}
+                      src={`/api/avatar/${e.userId}`}
+                      className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3"
+                    >
+                      <div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3 flex items-center justify-center">
+                        <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
+                      </div>
+                    </ImageWithFallback>
+                  );
+                })
+                .reverse()
+                .slice(0, 3)}
+              {collection.members.length - 3 > 0 ? (
+                <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3">
+                  +{collection.members.length - 3}
+                </div>
+              ) : null}
+            </div>
+            <div className="text-right w-full">
+              <p className="text-sky-500 font-bold text-sm">
+                {links.filter((e) => e.collectionId === collection.id).length}{" "}
+                Links
+              </p>
+              <p className="text-gray-500 font-bold text-xs">{formattedDate}</p>
+            </div>
           </div>
         </div>
-      </div>
-    </Link>
+      </Link>
+    </div>
   );
 }

components/ImageWithFallback.tsx

@@ -0,0 +1,27 @@
+import { ElementType, ReactElement, ReactNode, useState } from "react";
+
+type Props = {
+  src: string;
+  className: string;
+  children: ReactNode;
+};
+
+const ImageWithFallback = ({ src, className, children, ...rest }: Props) => {
+  const [error, setError] = useState(false);
+
+  return error ? (
+    <>{children}</>
+  ) : (
+    <img
+      alt=""
+      {...rest}
+      src={src}
+      className={className}
+      onError={() => {
+        setError(true);
+      }}
+    />
+  );
+};
+
+export default ImageWithFallback;

components/LinkList.tsx

@@ -45,7 +45,7 @@ export default function ({
   };
 
   return (
-    <div className="border border-sky-100 bg-gray-100 p-5 rounded-md flex items-start relative gap-5 sm:gap-10 group/item">
+    <div className="shadow hover:shadow-none duration-100 bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20%   p-5 rounded-md flex items-start relative gap-5 sm:gap-10 group/item">
       {editModal ? (
         <Modal toggleModal={toggleEditModal}>
           <EditLink toggleLinkModal={toggleEditModal} link={link} />
@@ -57,7 +57,7 @@ export default function ({
         width={42}
         height={42}
         alt=""
-        className="select-none mt-3 z-10 rounded-full border-[3px] border-sky-100"
+        className="select-none mt-3 z-10 rounded-full shadow border-[3px] border-sky-100"
         draggable="false"
         onError={(e) => {
           const target = e.target as HTMLElement;

components/Modal/AddCollection.tsx

@@ -5,12 +5,13 @@
 
 import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faClose, faPlus, faUser } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { ExtendedCollection, NewCollection } from "@/types/global";
 import { useSession } from "next-auth/react";
 import RequiredBadge from "../RequiredBadge";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
+import ImageWithFallback from "../ImageWithFallback";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -144,12 +145,16 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
                 }}
               />
               <div className="flex items-center gap-2">
-                <img
+                <ImageWithFallback
+                  key={i}
                   // @ts-ignore
                   src={`/api/avatar/${e.id}`}
                   className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
-                  alt=""
-                />
+                >
+                  <div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center">
+                    <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
+                  </div>
+                </ImageWithFallback>
                 <div>
                   <p className="text-sm font-bold text-sky-500">{e.name}</p>
                   <p className="text-sky-900">{e.email}</p>

components/Modal/EditCollection.tsx

@@ -10,6 +10,7 @@ import {
   faPenToSquare,
   faPlus,
   faTrashCan,
+  faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { ExtendedCollection } from "@/types/global";
@@ -18,6 +19,7 @@ import Modal from "@/components/Modal";
 import DeleteCollection from "@/components/Modal/DeleteCollection";
 import RequiredBadge from "../RequiredBadge";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
+import ImageWithFallback from "../ImageWithFallback";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -159,12 +161,15 @@ export default function EditCollection({
                 }}
               />
               <div className="flex items-center gap-2">
-                <img
-                  // @ts-ignore
+                <ImageWithFallback
+                  key={i}
                   src={`/api/avatar/${e.userId}`}
                   className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
-                  alt=""
-                />
+                >
+                  <div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center">
+                    <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
+                  </div>
+                </ImageWithFallback>
                 <div>
                   <p className="text-sm font-bold text-sky-500">
                     {e.user.name}

components/Sidebar/SidebarItem.tsx

@@ -11,9 +11,10 @@ interface SidebarItemProps {
   text: string;
   icon: ReactElement;
   path: string;
+  className?: string;
 }
 
-export default function ({ text, icon, path }: SidebarItemProps) {
+export default function ({ text, icon, path, className }: SidebarItemProps) {
   const router = useRouter();
   const [active, setActive] = useState(false);
 
@@ -27,7 +28,7 @@ export default function ({ text, icon, path }: SidebarItemProps) {
       <div
         className={`${
           active ? "bg-sky-500" : "hover:bg-gray-50 hover:outline bg-gray-100"
-        } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
+        } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2 ${className}`}
       >
         {React.cloneElement(icon, {
           className: `w-4 ${active ? "text-white" : "text-sky-300"}`,

components/Sidebar/index.tsx

@@ -119,6 +119,7 @@ export default function ({ className }: { className?: string }) {
               text={e.name}
               icon={<FontAwesomeIcon icon={faFolder} />}
               path={`/collections/${e.id}`}
+              className="capitalize"
             />
           );
         })}

pages/collections/[id].tsx

@@ -247,9 +247,11 @@ export default function () {
             ) : null}
           </div>
         </div>
-        {sortedLinks.map((e, i) => {
-          return <LinkList key={i} link={e} count={i} />;
-        })}
+        <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
+          {sortedLinks.map((e, i) => {
+            return <LinkList key={i} link={e} count={i} />;
+          })}
+        </div>
       </div>
     </MainLayout>
   );

pages/collections/index.tsx

@@ -194,11 +194,16 @@ export default function () {
           })}
 
           <div
-            className="p-5 bg-gray-100 self-stretch min-h-[12rem] rounded-md border-sky-100 border-solid border flex flex-col gap-4 justify-center items-center cursor-pointer hover:bg-gray-50 duration-100"
+            className="p-5 bg-gradient-to-tr from-sky-100 self-stretch to-gray-100 min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
             onClick={toggleCollectionModal}
           >
-            <p className="text-sky-900">New Collection</p>
-            <FontAwesomeIcon icon={faPlus} className="w-8 h-8 text-sky-500" />
+            <p className="text-sky-900 group-hover:opacity-0 duration-100">
+              New Collection
+            </p>
+            <FontAwesomeIcon
+              icon={faPlus}
+              className="w-8 h-8 text-sky-500 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
+            />
           </div>
         </div>
       </div>

pages/tags/[id].tsx

@@ -146,9 +146,11 @@ export default function () {
             ) : null}
           </div>
         </div>
-        {sortedLinks.map((e, i) => {
-          return <LinkList key={i} link={e} count={i} />;
-        })}
+        <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
+          {sortedLinks.map((e, i) => {
+            return <LinkList key={i} link={e} count={i} />;
+          })}
+        </div>
       </div>
     </MainLayout>
   );