archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

refactor(ui): standardize copy code feedback across all tabs (#5584)

Browse Source
This commit is contained in:
Igor Moraes 2025-08-30 11:01:01 -03:00 committed by GitHub
parent b6fda4fe6f
commit 667c86eaae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/docs/components/copy-button.tsx
View File

@ -2,6 +2,7 @@ import type {ButtonProps} from "@heroui/react";
import {useClipboard} from "@heroui/use-clipboard";
import {memo} from "react";
import {Tooltip} from "@heroui/react";
import {PreviewButton} from "./preview-button";
@ -32,7 +33,17 @@ export const CopyButton = memo<CopyButtonProps>(({value, className, ...buttonPro
copy(value);
};
return <PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />;
return (
<Tooltip
key={copied ? "copied" : "copy"}
className="text-xs px-2"
closeDelay={0}
content={copied ? "Copied!" : "Copy"}
radius="md"
>
<PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />
</Tooltip>
);
});
CopyButton.displayName = "CopyButton";

22
apps/docs/components/sandpack/copy-button.tsx
View File

@ -3,7 +3,7 @@ import {useSandpack} from "@codesandbox/sandpack-react";
import {Tooltip, Button} from "@heroui/react";
import {useClipboard} from "@heroui/use-clipboard";
import {CopyLinearIcon} from "@/components/icons";
import {CheckLinearIcon, CopyLinearIcon} from "@/components/icons";
export const CopyButton = ({code: codeProp}: {code?: string}) => {
const {copy, copied} = useClipboard();
@ -16,15 +16,33 @@ export const CopyButton = ({code: codeProp}: {code?: string}) => {
copy(code);
};
const icon = copied ? (
<CheckLinearIcon
className="text-white dark:text-zinc-500 opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
data-visible={copied}
height={16}
size={16}
width={16}
/>
) : (
<CopyLinearIcon
className="text-white dark:text-zinc-500 opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
data-visible={!copied}
height={16}
width={16}
/>
);
return (
<Tooltip
key={copied ? "copied" : "copy"}
className="text-xs px-2"
closeDelay={0}
content={copied ? "Copied!" : "Copy"}
radius="md"
>
<Button isIconOnly size="sm" title="Copy Code" variant="light" onPress={copyHandler}>
<CopyLinearIcon className="text-white dark:text-zinc-500" height={16} width={16} />
{icon}
</Button>
</Tooltip>
);