54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
|
import Image from "next/image";
|
|
import isValidUrl from "@/lib/shared/isValidUrl";
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function LinkGroupedIconURL({
|
|
link,
|
|
}: {
|
|
link: LinkIncludingShortenedCollectionAndTags;
|
|
}) {
|
|
const url =
|
|
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
|
|
|
|
const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
|
|
|
|
let shortendURL;
|
|
|
|
try {
|
|
shortendURL = new URL(link.url || "").host.toLowerCase();
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
|
|
return (
|
|
<Link href={link.url || ""} target="_blank">
|
|
<div className="bg-white shadow-md rounded-md border-[2px] flex gap-1 item-center justify-center border-white select-none z-10 max-w-full">
|
|
{link.url && url && showFavicon ? (
|
|
<Image
|
|
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
|
|
width={64}
|
|
height={64}
|
|
alt=""
|
|
className="w-5 h-5 rounded"
|
|
draggable="false"
|
|
onError={() => {
|
|
setShowFavicon(false);
|
|
}}
|
|
/>
|
|
) : showFavicon === false ? (
|
|
<i className="bi-link-45deg text-xl leading-none text-black"></i>
|
|
) : link.type === "pdf" ? (
|
|
<i className={`bi-file-earmark-pdf`}></i>
|
|
) : link.type === "image" ? (
|
|
<i className={`bi-file-earmark-image`}></i>
|
|
) : undefined}
|
|
<p className="truncate bg-white text-black mr-1">
|
|
<p className="text-sm">{shortendURL}</p>
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|