adds clipboard component

src/components/Clipboard.tsx

@@ -0,0 +1,49 @@
+import { useCopyToClipboard } from '@wordpress/compose';
+import { useState, useEffect } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+
+type CSSStyle = Record<string, string | number>;
+
+const Clipboard = ({
+	text,
+	style,
+}: {
+	text: string;
+	style: CSSStyle;
+}): JSX.Element => {
+	const [hasCopied, setHasCopied] = useState(false);
+
+	useEffect(() => {
+		let clipTimeout: NodeJS.Timeout | null = null;
+
+		if (hasCopied) {
+			clipTimeout = setTimeout(() => {
+				setHasCopied(false);
+			}, 4000);
+		}
+
+		return () => {
+			if (clipTimeout) {
+				window.clearTimeout(clipTimeout);
+			}
+		};
+	}, [hasCopied]);
+
+	const onCopy = () => setHasCopied(true);
+
+	const clipRef = useCopyToClipboard<HTMLButtonElement>(text, onCopy);
+
+	return (
+		<>
+			<Button
+				icon={hasCopied ? 'yes-alt' : 'clipboard'}
+				style={style}
+				isPressed={false}
+				variant={'tertiary'}
+				ref={clipRef}
+			/>
+		</>
+	);
+};
+
+export default Clipboard;

src/components/SdkModal.tsx

@@ -1,45 +1,17 @@
-import { Modal, Button } from '@wordpress/components';
+import { Modal } from '@wordpress/components';
 import Snippet from './Snippet';
-import { useMemo, useState, useEffect } from '@wordpress/element';
-import { useCopyToClipboard } from '@wordpress/compose';
+import { useMemo } from '@wordpress/element';
 import { Flag } from '../../types';
 import { __ } from '@wordpress/i18n';
 import TsSupport from './TsSupport';
+import Clipboard from './Clipboard';
 
 interface SdkModalProps {
 	item: Flag;
 	closeSdkModal: () => void;
 }
 
 const SdkModal = ({ item, closeSdkModal }: SdkModalProps): JSX.Element => {
-	const [hasJsCopied, setHasJsCopied] = useState(false);
-	const [hasPhpCopied, setHasPhpCopied] = useState(false);
-
-	useEffect(() => {
-		let jsTimeout: NodeJS.Timeout | null = null;
-		let phpTimeout: NodeJS.Timeout | null = null;
-
-		if (hasJsCopied) {
-			jsTimeout = setTimeout(() => {
-				setHasJsCopied(false);
-			}, 4000);
-		}
-
-		if (hasPhpCopied) {
-			phpTimeout = setTimeout(() => {
-				setHasPhpCopied(false);
-			}, 4000);
-		}
-		return () => {
-			if (jsTimeout) {
-				window.clearTimeout(jsTimeout);
-			}
-			if (phpTimeout) {
-				window.clearTimeout(phpTimeout);
-			}
-		};
-	}, [hasJsCopied, hasPhpCopied]);
-
 	const jsSnippet = useMemo(() => {
 		return `import domReady from '@wordpress/dom-ready';
 domReady(function () {
@@ -58,49 +30,35 @@ domReady(function () {
 }`;
 	}, [item.name]);
 
-	const jsRef = useCopyToClipboard<HTMLButtonElement>(jsSnippet, onJsCopy);
-
-	function onJsCopy() {
-		setHasJsCopied(true);
-	}
-
-	const phpRef = useCopyToClipboard<HTMLButtonElement>(phpSnippet, onPhpCopy);
-
-	function onPhpCopy() {
-		setHasPhpCopied(true);
-	}
-
 	return (
-		<Modal title={`SDK snippets`} onRequestClose={closeSdkModal}>
+		<Modal
+			title={`SDK for feature flag: ${item.name}`}
+			onRequestClose={closeSdkModal}
+		>
 			<div className="mr-feature-flag-php-snippet-container">
 				<h3>{__('PHP Snippet', 'mr-feature-flags')}</h3>
-				<Button
-					icon={hasPhpCopied ? 'yes-alt' : 'clipboard'}
+				<Clipboard
+					text={phpSnippet}
 					style={{
 						color: 'darkgray',
 						float: 'right',
 						position: 'relative',
 						right: 40,
+						top: 24,
 					}}
-					isPressed={false}
-					variant={'tertiary'}
-					ref={phpRef}
 				/>
 				<Snippet data={phpSnippet} language={'php'} />
 			</div>
 			<div className="mr-feature-flag-js-snippet-container">
 				<h3>{__('JavaScript Snippet', 'mr-feature-flags')}</h3>
-				<Button
-					icon={hasJsCopied ? 'yes-alt' : 'clipboard'}
+				<Clipboard
+					text={jsSnippet}
 					style={{
 						color: 'darkgray',
 						float: 'right',
 						position: 'relative',
 						right: 40,
 					}}
-					isPressed={false}
-					variant={'tertiary'}
-					ref={jsRef}
 				/>
 				<Snippet data={jsSnippet} language={'typescript'} />
 			</div>

src/components/TsSupport.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import Clipboard from './Clipboard';
 
 import Snippet from './Snippet';
 
@@ -26,6 +27,15 @@ export {};`;
 				<span className="mr-feature-flags-slug">flags.d.ts</span> at the
 				root of the plugin / theme and add below declaration.
 			</p>
+			<Clipboard
+				text={tsSnippet}
+				style={{
+					color: 'darkgray',
+					float: 'right',
+					position: 'relative',
+					right: 40,
+				}}
+			/>
 			<Snippet data={tsSnippet} language={'typescript'} />
 		</div>
 	);