From 500f7a338c3048aaefad17162c5de2094b7d99f8 Mon Sep 17 00:00:00 2001
From: Yee Jia Wei <yeejiawei0811@gmail.com>
Date: Sun, 17 Dec 2023 16:30:09 +0800
Subject: [PATCH] update link component icons

---
 components/LinkViews/LinkComponents/LinkCard.tsx   | 14 ++++++--------
 .../LinkViews/LinkComponents/LinkCollection.tsx    | 14 +++-----------
 components/LinkViews/LinkComponents/LinkDate.tsx   |  9 +++------
 components/LinkViews/LinkComponents/LinkIcon.tsx   | 12 ++++--------
 4 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/components/LinkViews/LinkComponents/LinkCard.tsx b/components/LinkViews/LinkComponents/LinkCard.tsx
index a1787d13..23361242 100644
--- a/components/LinkViews/LinkComponents/LinkCard.tsx
+++ b/components/LinkViews/LinkComponents/LinkCard.tsx
@@ -2,9 +2,7 @@ import {
   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 React, { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
 import isValidUrl from "@/lib/shared/isValidUrl";
@@ -62,7 +60,7 @@ export default function LinkCard({ link, count, className }: Props) {
         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} />
+          <LinkIcon link={link}/>
         </div>
 
         <div className="flex items-baseline gap-1">
@@ -74,19 +72,19 @@ export default function LinkCard({ link, count, className }: Props) {
 
         {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" />
+            <i className="bi-link-45deg"/>
             <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} />
+        <LinkDate link={link}/>
       </div>
 
-      <LinkActions link={link} collection={collection} />
+      <LinkActions link={link} collection={collection}/>
     </div>
   );
 }
diff --git a/components/LinkViews/LinkComponents/LinkCollection.tsx b/components/LinkViews/LinkComponents/LinkCollection.tsx
index 16c9bb5f..4eafee70 100644
--- a/components/LinkViews/LinkComponents/LinkCollection.tsx
+++ b/components/LinkViews/LinkComponents/LinkCollection.tsx
@@ -2,14 +2,10 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/router";
+import React from "react";
 
-export default function LinkCollection({
-  link,
-  collection,
-}: {
+export default function LinkCollection({ link, collection }: {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
 }) {
@@ -23,11 +19,7 @@ export default function LinkCollection({
       }}
       className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
     >
-      <FontAwesomeIcon
-        icon={faFolder}
-        className="w-4 h-4 shadow"
-        style={{ color: collection?.color }}
-      />
+      <i className="bi-folder2 text-lg shadow" style={{ color: collection?.color }}></i>
       <p className="truncate capitalize">{collection?.name}</p>
     </div>
   );
diff --git a/components/LinkViews/LinkComponents/LinkDate.tsx b/components/LinkViews/LinkComponents/LinkDate.tsx
index 282ab700..04f1a0d3 100644
--- a/components/LinkViews/LinkComponents/LinkDate.tsx
+++ b/components/LinkViews/LinkComponents/LinkDate.tsx
@@ -1,10 +1,7 @@
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
+import React from "react";
 
-export default function LinkDate({
-  link,
-}: {
+export default function LinkDate({ link }: {
   link: LinkIncludingShortenedCollectionAndTags;
 }) {
   const formattedDate = new Date(link.createdAt as string).toLocaleString(
@@ -18,7 +15,7 @@ export default function LinkDate({
 
   return (
     <div className="flex items-center gap-1 text-neutral">
-      <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+      <i className="bi-calendar3 text-lg"></i>
       <p>{formattedDate}</p>
     </div>
   );
diff --git a/components/LinkViews/LinkComponents/LinkIcon.tsx b/components/LinkViews/LinkComponents/LinkIcon.tsx
index f09149c7..4e423bfb 100644
--- a/components/LinkViews/LinkComponents/LinkIcon.tsx
+++ b/components/LinkViews/LinkComponents/LinkIcon.tsx
@@ -1,13 +1,9 @@
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
 import Image from "next/image";
 import isValidUrl from "@/lib/shared/isValidUrl";
+import React from "react";
 
-export default function LinkIcon({
-  link,
-  width,
-}: {
+export default function LinkIcon({ link, width }: {
   link: LinkIncludingShortenedCollectionAndTags;
   width?: string;
 }) {
@@ -35,9 +31,9 @@ export default function LinkIcon({
           }}
         />
       ) : link.type === "pdf" ? (
-        <FontAwesomeIcon icon={faFilePdf} className={iconClasses} />
+        <i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
       ) : link.type === "image" ? (
-        <FontAwesomeIcon icon={faFileImage} className={iconClasses} />
+        <i className={`bi-file-earmark-image ${iconClasses}`}></i>
       ) : undefined}
     </div>
   );