mirror of https://github.com/astral-sh/ruff
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import AstralButton from "./AstralButton";
|
|
|
|
export default function ShareButton({ onShare }: { onShare: () => void }) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (copied) {
|
|
const timeout = setTimeout(() => setCopied(false), 2000);
|
|
return () => clearTimeout(timeout);
|
|
}
|
|
}, [copied]);
|
|
|
|
return copied ? (
|
|
<AstralButton
|
|
type="button"
|
|
className="relative flex-none leading-6 py-1.5 px-3 cursor-auto dark:shadow-copied"
|
|
>
|
|
<span
|
|
className="absolute inset-0 flex items-center justify-center invisible"
|
|
aria-hidden="true"
|
|
>
|
|
Share
|
|
</span>
|
|
<span aria-hidden="false">Copied!</span>
|
|
</AstralButton>
|
|
) : (
|
|
<AstralButton
|
|
type="button"
|
|
className="relative flex-none leading-6 py-1.5 px-3 shadow-xs disabled:opacity-50"
|
|
disabled={copied}
|
|
onClick={() => {
|
|
setCopied(true);
|
|
onShare();
|
|
}}
|
|
>
|
|
<span
|
|
className="absolute inset-0 flex items-center justify-center"
|
|
aria-hidden="false"
|
|
>
|
|
Share
|
|
</span>
|
|
<span className="invisible" aria-hidden="true">
|
|
Copied!
|
|
</span>
|
|
</AstralButton>
|
|
);
|
|
}
|