88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import { BASE_URL } from "core/httpClient";
|
|
import { useRef, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Button } from "../../../Button/Button";
|
|
import { SVGCopy, SVGShare, SVGXmark } from "../../../icons";
|
|
import Typography from "../../../typography/Typography";
|
|
import { CopyToClipboard } from "react-copy-to-clipboard";
|
|
import { Popover } from "@headlessui/react";
|
|
|
|
type Props = {
|
|
emphasis?: "high" | "low";
|
|
linktoCopy?: string;
|
|
};
|
|
|
|
export function ShareButton({ emphasis, linktoCopy }: Props) {
|
|
const [t, i18next] = useTranslation("translation", {
|
|
keyPrefix: "articlePage.interactionButtons",
|
|
});
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const copyValue =
|
|
BASE_URL != undefined && linktoCopy != undefined
|
|
? BASE_URL + linktoCopy
|
|
: t("searchResults.nothingFound");
|
|
|
|
function onCopy() {
|
|
setCopied(true);
|
|
setTimeout(() => {
|
|
setCopied(false);
|
|
}, 1500);
|
|
};
|
|
|
|
const handleFocus = (event: any) => event.target.select();
|
|
|
|
return (
|
|
<Popover className="relative">
|
|
<Popover.Button>
|
|
<Button emphasis="low" className="px-2">
|
|
<Button.Icon>
|
|
<SVGShare className="w-6 fill-gray-900 stroke-gray-900" />
|
|
</Button.Icon>
|
|
{emphasis === "high" && <Typography>{t("share")}</Typography>}
|
|
</Button>
|
|
</Popover.Button>
|
|
|
|
<Popover.Panel className="absolute z-10 -right-3/4 mt-3 pl-2 bg-white border-2 border-gray-300 shadow-lg rounded">
|
|
<div className="flex flex-row">
|
|
<input
|
|
className="focus:outline-none active:outline-none p-1 mr-1"
|
|
type="text"
|
|
readOnly
|
|
value={copyValue}
|
|
onFocus={handleFocus}
|
|
/>
|
|
<div className="relative">
|
|
<CopyToClipboard text={copyValue} onCopy={onCopy}>
|
|
<Button
|
|
emphasis="low"
|
|
className="items-center border-l-2 rounded-none "
|
|
>
|
|
<Button.Icon>
|
|
<SVGCopy className="w-5 fill-gray-900 stroke-gray-900" />
|
|
</Button.Icon>
|
|
</Button>
|
|
</CopyToClipboard>
|
|
|
|
{copied && (
|
|
<div className="absolute z-11 -bottom-full bg-gray-900 text-white px-2 py-1 rounded before:content[''] before:absolute before:bg-gray-900 before:rotate-45 before:w-3 before:h-3 before:-top-1 before:left-4 before:block">
|
|
{t("copied")}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Popover.Button>
|
|
<Button
|
|
emphasis="low"
|
|
className="items-center border-l-2 rounded-none "
|
|
>
|
|
<Button.Icon>
|
|
<SVGXmark className="w-5 fill-gray-900 stroke-gray-900" />
|
|
</Button.Icon>
|
|
</Button>
|
|
</Popover.Button>
|
|
</div>
|
|
</Popover.Panel>
|
|
</Popover>
|
|
);
|
|
}
|