jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-16 18:35:33 -04:00
Code Issues Activity

properly merge multiple class names

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-20 10:38:18 -05:00
parent 0462428a54
commit 2162e9d563
10 changed files with 47 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/CopyButton/CopyButton.module.css
View File

@@ -1,19 +1,8 @@
.copy {
position: absolute;
top: 0;
right: 0;
padding: 0.65em;
line-height: 1;
color: var(--medium-dark);
background-color: var(--background-inner);
border: 1px solid var(--kinda-light);
cursor: pointer;
}
.copy:hover {
color: var(--link);
}
.success {
color: var(--success) !important;
}

5
components/CopyButton/CopyButton.tsx
View File

@@ -11,9 +11,10 @@ const cx = classNames.bind(styles);
type Props = {
source: ReactNode;
timeout?: number;
className?: string;
};
const CopyButton = ({ source, timeout = 2000 }: Props) => {
const CopyButton = ({ source, timeout = 2000, className }: Props) => {
const [copied, setCopied] = useState(false);
const handleCopy = (e) => {
@@ -43,7 +44,7 @@ const CopyButton = ({ source, timeout = 2000 }: Props) => {
return (
<button
className={cx({ copy: true, success: !!copied })}
className={cx({ copy: true, success: !!copied }, className)}
title="Copy to clipboard"
aria-label="Copy to clipboard"
onClick={handleCopy}