docs: share tweak copy button

This commit is contained in:
Jay V
2025-07-15 18:25:25 -04:00
parent 7c91f668d1
commit bb155db8b2
5 changed files with 37 additions and 44 deletions

View File

@@ -11,7 +11,8 @@ export function CopyButton(props: CopyButtonProps) {
function handleCopyClick() {
if (props.text) {
navigator.clipboard.writeText(props.text).catch((err) => console.error("Copy failed", err))
navigator.clipboard.writeText(props.text)
.catch((err) => console.error("Copy failed", err))
setCopied(true)
setTimeout(() => setCopied(false), 2000)
@@ -19,17 +20,17 @@ export function CopyButton(props: CopyButtonProps) {
}
return (
<div class={styles.copyButtonWrapper}>
<div data-component="copy-button" class={styles.root}>
<button
type="button"
class={styles.copyButton}
onClick={handleCopyClick}
data-copied={copied() ? true : undefined}
title="Copy content"
>
{copied() ? <IconCheckCircle width={16} height={16} /> : <IconClipboard width={16} height={16} />}
{copied()
? <IconCheckCircle width={16} height={16} />
: <IconClipboard width={16} height={16} />
}
</button>
{copied() && <span class={styles.copyTooltip}>Copied!</span>}
</div>
)
}