choose to show which detail in each views

components/LinkViews/LinkComponents/LinkCard.tsx

@@ -24,6 +24,7 @@ import { useUser } from "@/hooks/store/user";
 import { useGetLink, useLinks } from "@/hooks/store/links";
 import { useRouter } from "next/router";
 import useLocalSettingsStore from "@/store/localSettings";
+import clsx from "clsx";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -148,64 +149,70 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
           !editMode && window.open(generateLinkHref(link, user), "_blank")
         }
       >
-        <div>
-          <div className="relative rounded-t-2xl h-40 overflow-hidden">
-            {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-40 w-full shadow opacity-80 scale-105"
-                style={
-                  link.type !== "image" ? { filter: "blur(1px)" } : undefined
-                }
-                draggable="false"
-                onError={(e) => {
-                  const target = e.target as HTMLElement;
-                  target.style.display = "none";
-                }}
-              />
-            ) : link.preview === "unavailable" ? (
-              <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
-            ) : (
-              <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-            )}
-            <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
-              <LinkIcon link={link} />
-            </div>
-          </div>
-          <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
-        </div>
-
-        <div className="flex flex-col justify-between h-full">
-          <div className="p-3 flex flex-col gap-2">
-            <p className="truncate w-full pr-9 text-primary text-sm">
-              {unescapeString(link.name)}
-            </p>
-
-            <LinkTypeBadge link={link} />
-          </div>
-
+        {show.image && (
           <div>
-            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
-
-            <div className="flex justify-between text-xs text-neutral px-3 pb-1 gap-2">
-              <div className="cursor-pointer truncate">
-                {collection && (
-                  <LinkCollection link={link} collection={collection} />
-                )}
-              </div>
-              <LinkDate link={link} />
+            <div className="relative rounded-t-2xl h-40 overflow-hidden">
+              {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-40 w-full shadow opacity-80 scale-105"
+                  style={show.icon ? { filter: "blur(1px)" } : undefined}
+                  draggable="false"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              ) : link.preview === "unavailable" ? (
+                <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
+              ) : (
+                <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+              )}
+              {show.icon && (
+                <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
+                  <LinkIcon link={link} />
+                </div>
+              )}
             </div>
+            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
           </div>
+        )}
+
+        <div className="flex flex-col justify-between h-full min-h-24">
+          <div className="p-3 flex flex-col gap-2">
+            {show.name && (
+              <p className="truncate w-full pr-9 text-primary text-sm">
+                {unescapeString(link.name)}
+              </p>
+            )}
+
+            {show.link && <LinkTypeBadge link={link} />}
+          </div>
+
+          {(show.collection || show.date) && (
+            <div>
+              <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
+              <div className="flex justify-between text-xs text-neutral px-3 pb-1 gap-2">
+                {show.collection && (
+                  <div className="cursor-pointer truncate">
+                    <LinkCollection link={link} collection={collection} />
+                  </div>
+                )}
+                {show.date && <LinkDate link={link} />}
+              </div>
+            </div>
+          )}
         </div>
       </div>
 
       <LinkActions
         link={link}
         collection={collection}
-        position="top-[10.75rem] right-3"
+        position={clsx(show.image ? "top-[10.75rem]" : "top-3", "right-3")}
         flipDropdown={flipDropdown}
       />
     </div>