added custom icons for links

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -2,34 +2,24 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import Image from "next/image";
 import isValidUrl from "@/lib/shared/isValidUrl";
 import React from "react";
+import Icon from "@/components/Icon";
+import { IconWeight } from "@phosphor-icons/react";
+import clsx from "clsx";
 
 export default function LinkIcon({
   link,
   className,
-  size,
+  hideBackground,
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
   className?: string;
-  size?: "small" | "medium";
+  hideBackground?: boolean;
 }) {
-  let iconClasses: string =
-    "bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10 " +
-    (className || "");
-
-  let dimension;
-
-  switch (size) {
-    case "small":
-      dimension = " w-8 h-8";
-      break;
-    case "medium":
-      dimension = " w-12 h-12";
-      break;
-    default:
-      size = "medium";
-      dimension = " w-12 h-12";
-      break;
-  }
+  let iconClasses: string = clsx(
+    "rounded-md flex item-center justify-center select-none z-10 w-12 h-12",
+    !hideBackground && "bg-white backdrop-blur-lg bg-opacity-50 p-1",
+    className
+  );
 
   const url =
     isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
@@ -38,14 +28,22 @@ export default function LinkIcon({
 
   return (
     <>
-      {link.type === "url" && url ? (
+      {link.icon ? (
+        <Icon
+          icon={link.icon}
+          size={30}
+          weight={(link.iconWeight || "regular") as IconWeight}
+          color={link.color || "#0ea5e9"}
+          className={iconClasses}
+        />
+      ) : link.type === "url" && url ? (
         showFavicon ? (
           <Image
             src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
             width={64}
             height={64}
             alt=""
-            className={iconClasses + dimension}
+            className={iconClasses}
             draggable="false"
             onError={() => {
               setShowFavicon(false);
@@ -53,22 +51,22 @@ export default function LinkIcon({
           />
         ) : (
           <LinkPlaceholderIcon
-            iconClasses={iconClasses + dimension}
-            size={size}
+            iconClasses={iconClasses}
             icon="bi-link-45deg"
+            hideBackground={hideBackground}
           />
         )
       ) : link.type === "pdf" ? (
         <LinkPlaceholderIcon
-          iconClasses={iconClasses + dimension}
-          size={size}
+          iconClasses={iconClasses}
           icon="bi-file-earmark-pdf"
+          hideBackground={hideBackground}
         />
       ) : link.type === "image" ? (
         <LinkPlaceholderIcon
-          iconClasses={iconClasses + dimension}
-          size={size}
+          iconClasses={iconClasses}
           icon="bi-file-earmark-image"
+          hideBackground={hideBackground}
         />
       ) : // : link.type === "monolith" ? (
       //   <LinkPlaceholderIcon
@@ -84,20 +82,18 @@ export default function LinkIcon({
 
 const LinkPlaceholderIcon = ({
   iconClasses,
-  size,
   icon,
+  hideBackground,
 }: {
   iconClasses: string;
-  size?: "small" | "medium";
   icon: string;
+  hideBackground?: boolean;
 }) => {
   return (
-    <div
-      className={`${
-        size === "small" ? "text-2xl" : "text-4xl"
-      } text-black aspect-square ${iconClasses}`}
-    >
+    <div className={clsx(iconClasses, "aspect-square text-4xl text-[#0ea5e9]")}>
       <i className={`${icon} m-auto`}></i>
     </div>
   );
 };
+
+// `text-black aspect-square text-4xl ${iconClasses}`

components/LinkViews/LinkComponents/LinkList.tsx

@@ -111,7 +111,7 @@ export default function LinkCardCompact({
           }
         >
           <div className="shrink-0">
-            <LinkIcon link={link} className="w-12 h-12 text-4xl" />
+            <LinkIcon link={link} hideBackground />
           </div>
 
           <div className="w-[calc(100%-56px)] ml-2">