69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import { FaArchive, FaExternalLinkAlt, FaFilePdf } from "react-icons/fa";
|
|
import Link, { LinkType } from "../models/link";
|
|
import Image from "next/image";
|
|
import { BsThreeDots } from "react-icons/bs";
|
|
import LinkIcon from "./LinkIcon";
|
|
|
|
interface ILinkCardProps {
|
|
link: Link;
|
|
}
|
|
|
|
export default function LinkCard(props: ILinkCardProps) {
|
|
return (
|
|
<span
|
|
onClick={() => window.open(props.link.link, "_blank")}
|
|
className="flex flex-col rounded-lg hover:cursor-pointer"
|
|
>
|
|
{/* attmnt header */}
|
|
<span className="flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start">
|
|
<LinkIcon className="text-4xl mr-2" linkType={props.link.type} />
|
|
|
|
<span className="flex flex-col items-baseline mr-10 space-y-1">
|
|
<span className="text-md font-bold text-white">
|
|
{props.link.name}
|
|
</span>
|
|
|
|
<span
|
|
className={`text-gray-200 text-xs mb-auto text-ellipsis whitespace-pre-line max-h-10 overflow-hidden`}
|
|
>
|
|
{props.link.description}
|
|
</span>
|
|
</span>
|
|
|
|
{/* attachment actions */}
|
|
<button
|
|
onClick={() => window.open(props.link.link, "_blank")}
|
|
className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40"
|
|
>
|
|
<FaExternalLinkAlt className="text-sm text-white" />
|
|
</button>
|
|
</span>
|
|
|
|
{/* attmnt footer */}
|
|
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
|
<span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
|
|
<span className="relative flex">
|
|
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
|
<Image
|
|
className=""
|
|
src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"}
|
|
alt="profile"
|
|
width={30}
|
|
height={30}
|
|
/>
|
|
</span>
|
|
</span>
|
|
|
|
<span className="flex flex-col items-baseline">
|
|
<span className="text-xs text-gray-200 font-bold">Adriana</span>
|
|
<span className="text-xs text-gray-200 font-extralight">
|
|
5 minutes ago
|
|
</span>
|
|
</span>
|
|
|
|
<BsThreeDots className="text-white ml-auto hover:cursor-pointer" />
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|