improvements

components/LinkViews/LinkCard.tsx

@@ -2,15 +2,15 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
-import isValidUrl from "@/lib/shared/isValidUrl";
 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 Link from "next/link";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -18,10 +18,18 @@ type Props = {
   className?: string;
 };
 
-export default function LinkCard({ link, count, className }: Props) {
+export default function LinkGrid({ link, count, className }: Props) {
+  const { collections } = useCollectionStore();
+
   const { links } = useLinkStore();
 
-  const { collections } = useCollectionStore();
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
 
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(
@@ -38,53 +46,61 @@ export default function LinkCard({ link, count, className }: Props) {
     );
   }, [collections, links]);
 
-  let shortendURL;
-
-  try {
-    shortendURL = new URL(link.url || "").host.toLowerCase();
-  } catch (error) {
-    console.log(error);
-  }
-
-  const url =
-    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
-
   return (
-    <div
-      className={`h-fit hover:bg-base-300 hover:border-base-300 border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-200 rounded-2xl relative ${
-        className || ""
-      }`}
-    >
+    <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="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
+        className="cursor-pointer"
       >
-        <div className="absolute bottom-3 right-3">
-          <LinkIcon link={link}/>
-        </div>
+        <LinkIcon link={link} width="w-12 mb-3" />
+        <p className="truncate w-full">
+          {unescapeString(link.name || link.description) || link.url}
+        </p>
 
-        <div className="flex items-baseline gap-1">
-          <p className="text-sm text-neutral">{count + 1}</p>
-          <p className="text-lg truncate w-full pr-8">
-            {unescapeString(link.name || link.description) || link.url}
-          </p>
-        </div>
-
-        {link.url ? (
-          <div className="flex items-center gap-1 max-w-full w-fit text-neutral">
-            <i className="bi-link-45deg"/>
-            <p className="truncate w-full">{shortendURL}</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");
+                }}
+                className="flex items-center hover:opacity-60 cursor-pointer duration-100"
+              >
+                <p className="truncate">{shortendURL}</p>
+              </div>
+            ) : (
+              <div className="badge badge-primary badge-sm my-1">
+                {link.type}
+              </div>
+            )}
           </div>
-        ) : (
-          <div className="badge badge-primary badge-sm my-1">{link.type}</div>
-        )}
-
-        <LinkCollection link={link} collection={collection}/>
-
-        <LinkDate link={link}/>
+          <LinkDate link={link} />
+        </div>
+        {/* <p className="truncate">{unescapeString(link.description)}</p>
+        {link.tags[0] ? (
+          <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
+            <div className="flex gap-1 items-center flex-wrap">
+              {link.tags.map((e, i) => (
+                <Link
+                  href={"/tags/" + e.id}
+                  key={i}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                >
+                  #{e.name}
+                </Link>
+              ))}
+            </div>
+          </div>
+        ) : undefined} */}
       </div>
 
-      <LinkActions link={link} collection={collection}/>
+      <LinkActions link={link} collection={collection} />
     </div>
   );
 }