import { ExtendedLink } from "@/types/global"; import { faFolder, faArrowUpRightFromSquare, faEllipsis, faStar, faPenToSquare, faTrashCan, } from "@fortawesome/free-solid-svg-icons"; import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useState } from "react"; import Image from "next/image"; import Dropdown from "./Dropdown"; import useLinkStore from "@/store/links"; export default function ({ link, count, }: { link: ExtendedLink; count: number; }) { const [editDropdown, setEditDropdown] = useState(false); const [archiveLabel, setArchiveLabel] = useState("Archived Formats"); const { removeLink } = useLinkStore(); const shortendURL = new URL(link.url).host.toLowerCase(); const formattedDate = new Date(link.createdAt).toLocaleString("en-US", { year: "numeric", month: "short", day: "numeric", }); return (

{count + 1}.

{link.name}

{link.starred ? ( ) : null}

{link.title}

{link.collection.name}

{link.tags.map((e, i) => (

# {e.name}

))}

{formattedDate}

{shortendURL}

setEditDropdown(!editDropdown)} id="edit-dropdown" />

{archiveLabel}

setArchiveLabel("Archived Formats")} > setArchiveLabel("Screenshot")} target="_blank" > setArchiveLabel("PDF")} > setArchiveLabel("Wayback Machine")} />
{editDropdown ? ( , }, { name: "Edit", icon: , }, { name: "Delete", icon: , onClick: () => removeLink(link), }, ]} onClickOutside={(e: Event) => { const target = e.target as HTMLInputElement; if (target.id !== "edit-dropdown") setEditDropdown(false); }} className="absolute top-10 right-0" /> ) : null}
); }