el.xwx.moe/components/LinkViews/LinkComponents/LinkIcon.tsx

104 lines
2.5 KiB
TypeScript
Raw Normal View History

2023-12-15 21:25:39 -06:00
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import Image from "next/image";
import isValidUrl from "@/lib/shared/isValidUrl";
2023-12-17 02:30:09 -06:00
import React from "react";
2023-12-15 21:25:39 -06:00
2023-12-21 09:55:07 -06:00
export default function LinkIcon({
link,
className,
2024-04-27 11:23:33 -05:00
size,
2023-12-21 09:55:07 -06:00
}: {
2023-12-15 21:25:39 -06:00
link: LinkIncludingShortenedCollectionAndTags;
className?: string;
2024-04-27 11:23:33 -05:00
size?: "small" | "medium";
2023-12-15 21:25:39 -06:00
}) {
2024-04-27 11:23:33 -05:00
let iconClasses: string =
"bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10 " +
(className || "");
let dimension;
switch (size) {
case "small":
dimension = " w-8 h-8";
break;
case "medium":
dimension = " w-12 h-12";
break;
default:
size = "medium";
dimension = " w-12 h-12";
break;
}
2023-12-15 21:25:39 -06:00
const url =
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
2023-12-23 11:11:47 -06:00
const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
return (
<>
{link.type === "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=""
2024-04-27 11:23:33 -05:00
className={iconClasses + dimension}
draggable="false"
onError={() => {
setShowFavicon(false);
}}
/>
) : (
2024-04-27 11:23:33 -05:00
<LinkPlaceholderIcon
iconClasses={iconClasses + dimension}
size={size}
icon="bi-link-45deg"
/>
)
) : link.type === "pdf" ? (
<LinkPlaceholderIcon
2024-04-27 11:23:33 -05:00
iconClasses={iconClasses + dimension}
size={size}
icon="bi-file-earmark-pdf"
/>
) : link.type === "image" ? (
<LinkPlaceholderIcon
2024-04-27 11:23:33 -05:00
iconClasses={iconClasses + dimension}
size={size}
icon="bi-file-earmark-image"
/>
2024-06-27 20:58:07 -05:00
) : // : link.type === "monolith" ? (
// <LinkPlaceholderIcon
// iconClasses={iconClasses + dimension}
// size={size}
// icon="bi-filetype-html"
// />
// )
undefined}
</>
);
2023-12-15 21:25:39 -06:00
}
const LinkPlaceholderIcon = ({
iconClasses,
2024-04-27 11:23:33 -05:00
size,
icon,
}: {
iconClasses: string;
2024-04-27 11:23:33 -05:00
size?: "small" | "medium";
icon: string;
}) => {
return (
2024-04-27 11:23:33 -05:00
<div
className={`${
size === "small" ? "text-2xl" : "text-4xl"
} text-black aspect-square ${iconClasses}`}
>
<i className={`${icon} m-auto`}></i>
</div>
);
};