better link card

components/LinkViews/Layouts/CardView.tsx

@@ -7,7 +7,7 @@ export default function CardView({
   links: LinkIncludingShortenedCollectionAndTags[];
 }) {
   return (
-    <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
+    <div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
       {links.map((e, i) => {
         return <LinkCard key={i} link={e} count={i} />;
       })}

components/LinkViews/LinkCard.tsx

@@ -1,4 +1,5 @@
 import {
+  ArchivedFormat,
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
@@ -9,8 +10,10 @@ import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
 import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
 import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
-import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
+import Image from "next/image";
+import { previewAvailable } from "@/lib/shared/getArchiveValidity";
 import Link from "next/link";
+import LinkIcon from "./LinkComponents/LinkIcon";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -47,30 +50,48 @@ export default function LinkGrid({ link, count, className }: Props) {
   }, [collections, links]);
 
   return (
-    <div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative p-3">
-      <div
-        onClick={() => link.url && window.open(link.url || "", "_blank")}
-        className="cursor-pointer"
-      >
-        <LinkIcon link={link} width="w-12 mb-3" />
+    <div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative">
+      <div className="relative rounded-t-2xl h-52">
+        {previewAvailable(link) ? (
+          <Image
+            src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+            width={1280}
+            height={720}
+            alt=""
+            className="rounded-t-2xl select-none object-cover z-10 h-52 w-full shadow"
+            draggable="false"
+            onError={(e) => {
+              const target = e.target as HTMLElement;
+              target.style.display = "none";
+            }}
+          />
+        ) : undefined}
+        <div
+          style={{
+            background: "radial-gradient(circle, #ffffff, transparent)",
+          }}
+          className="absolute top-0 left-0 right-0 rounded-t-2xl flex items-center justify-center h-52 shadow rounded-md"
+        >
+          <LinkIcon link={link} width="w-12" />
+        </div>
+      </div>
+
+      <div className="p-3">
         <p className="truncate w-full">
           {unescapeString(link.name || link.description) || link.url}
         </p>
-
         <div className="mt-1 flex flex-col text-xs text-neutral">
           <div className="flex items-center gap-2">
             <LinkCollection link={link} collection={collection} />
             &middot;
             {link.url ? (
-              <div
-                onClick={(e) => {
-                  e.preventDefault();
-                  window.open(link.url || "", "_blank");
-                }}
+              <Link
+                href={link.url}
+                target="_blank"
                 className="flex items-center hover:opacity-60 cursor-pointer duration-100"
               >
                 <p className="truncate">{shortendURL}</p>
-              </div>
+              </Link>
             ) : (
               <div className="badge badge-primary badge-sm my-1">
                 {link.type}

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -18,9 +18,11 @@ export default function LinkIcon({
     " " +
     (width || "w-12");
 
+  const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
+
   return (
     <div>
-      {link.url && url ? (
+      {link.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}
@@ -28,11 +30,14 @@ export default function LinkIcon({
           alt=""
           className={iconClasses}
           draggable="false"
-          onError={(e) => {
-            const target = e.target as HTMLElement;
-            target.style.display = "none";
+          onError={() => {
+            setShowFavicon(false);
           }}
         />
+      ) : showFavicon === false ? (
+        <div className="flex items-center justify-center h-12 w-12 bg-base-200 rounded-md shadow">
+          <i className="bi-link-45deg text-4xl text-primary"></i>
+        </div>
       ) : link.type === "pdf" ? (
         <i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
       ) : link.type === "image" ? (