35 lines
1016 B
TypeScript
35 lines
1016 B
TypeScript
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
|
import { useRouter } from "next/router";
|
|
import clsx from "clsx";
|
|
import usePinLink from "@/lib/client/pinLink";
|
|
|
|
type Props = {
|
|
link: LinkIncludingShortenedCollectionAndTags;
|
|
btnStyle?: string;
|
|
};
|
|
|
|
export default function LinkPin({ link, btnStyle }: Props) {
|
|
const pinLink = usePinLink();
|
|
const router = useRouter();
|
|
|
|
const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
|
|
const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0] ? true : false;
|
|
|
|
return (
|
|
<div
|
|
className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
|
|
onClick={() => pinLink(link)}
|
|
>
|
|
<div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>
|
|
<i
|
|
title="Pin"
|
|
className={clsx(
|
|
"text-xl",
|
|
isAlreadyPinned ? "bi-pin-fill" : "bi-pin"
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|