From 7c35fe409fa638b7361dd541ec9b4e6c6c36ec9e Mon Sep 17 00:00:00 2001
From: Yee Jia Wei <yeejiawei0811@gmail.com>
Date: Sat, 16 Dec 2023 12:08:28 +0800
Subject: [PATCH] Update LinkCard.tsx

---
 components/LinkCard.tsx | 137 +++++++++++++++++++---------------------
 1 file changed, 66 insertions(+), 71 deletions(-)

diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 8591f228..1a9c80e9 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -1,17 +1,12 @@
 import {
-    CollectionIncludingMembersAndLinkCount,
-    LinkIncludingShortenedCollectionAndTags,
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import {faLink} from "@fortawesome/free-solid-svg-icons";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {useEffect, useState} from "react";
-import Image from "next/image";
+import { faLink } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
-import {
-    faFileImage,
-    faFilePdf,
-} from "@fortawesome/free-regular-svg-icons";
 import isValidUrl from "@/lib/shared/isValidUrl";
 import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
@@ -20,76 +15,76 @@ import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection
 import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
 
 type Props = {
-    link: LinkIncludingShortenedCollectionAndTags;
-    count: number;
-    className?: string;
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  className?: string;
 };
 
-export default function LinkCard({link, count, className}: Props) {
-    const {links} = useLinkStore();
+export default function LinkCard({ link, count, className }: Props) {
+  const { links } = useLinkStore();
 
-    const {collections} = useCollectionStore();
+  const { collections } = useCollectionStore();
 
-    const [collection, setCollection] =
-        useState<CollectionIncludingMembersAndLinkCount>(
-            collections.find(
-                (e) => e.id === link.collection.id
-            ) as CollectionIncludingMembersAndLinkCount
-        );
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(
+      collections.find(
+        (e) => e.id === link.collection.id,
+      ) as CollectionIncludingMembersAndLinkCount,
+    );
 
-    useEffect(() => {
-        setCollection(
-            collections.find(
-                (e) => e.id === link.collection.id
-            ) as CollectionIncludingMembersAndLinkCount
-        );
-    }, [collections, links]);
+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id,
+      ) as CollectionIncludingMembersAndLinkCount,
+    );
+  }, [collections, links]);
 
-    let shortendURL;
+  let shortendURL;
 
-    try {
-        shortendURL = new URL(link.url || "").host.toLowerCase();
-    } catch (error) {
-        console.log(error);
-    }
+  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;
+  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
-                onClick={() => link.url && window.open(link.url || "", "_blank")}
-                className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
-            >
-                <div className="absolute bottom-3 right-3">
-                    <LinkIcon link={link} />
-                </div>
+  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
+        onClick={() => link.url && window.open(link.url || "", "_blank")}
+        className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
+      >
+        <div className="absolute bottom-3 right-3">
+          <LinkIcon link={link} />
+        </div>
 
-                <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>
+        <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">
-                        <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4"/>
-                        <p className="truncate w-full">{shortendURL}</p>
-                    </div>
-                ) : (
-                    <div className="badge badge-primary badge-sm my-1">{link.type}</div>
-                )}
+        {link.url ? (
+          <div className="flex items-center gap-1 max-w-full w-fit text-neutral">
+            <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
+            <p className="truncate w-full">{shortendURL}</p>
+          </div>
+        ) : (
+          <div className="badge badge-primary badge-sm my-1">{link.type}</div>
+        )}
 
-                <LinkCollection link={link} collection={collection}/>
+        <LinkCollection link={link} collection={collection} />
 
-                <LinkDate link={link}/>
-                {/* {link.tags[0] ? (
+        <LinkDate link={link} />
+        {/* {link.tags[0] ? (
 <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
 <div className="flex gap-1 items-center flex-nowrap">
 {link.tags.map((e, i) => (
@@ -110,9 +105,9 @@ export default function LinkCard({link, count, className}: Props) {
 ) : (
 <p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
 )} */}
-            </div>
+      </div>
 
-            <LinkActions link={link} collection={collection}/>
-        </div>
-    );
+      <LinkActions link={link} collection={collection} />
+    </div>
+  );
 }