el.xwx.moe/components/LinkViews/LinkComponents/LinkCollection.tsx
2023-12-16 11:25:39 +08:00

35 lines
942 B
TypeScript

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";
export default function LinkCollection({
link,
collection,
}: {
link: LinkIncludingShortenedCollectionAndTags;
collection: CollectionIncludingMembersAndLinkCount;
}) {
const router = useRouter();
return (
<div
onClick={(e) => {
e.preventDefault();
router.push(`/collections/${link.collection.id}`);
}}
className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
>
<FontAwesomeIcon
icon={faFolder}
className="w-4 h-4"
style={{ color: collection?.color }}
/>
<p className="truncate capitalize">{collection?.name}</p>
</div>
);
}