From 3cd28d21360099f806879b054fdea90115f86ee2 Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Wed, 20 Nov 2024 18:01:20 -0500
Subject: [PATCH] feat: make the code snippets copyable

---
 app/components/Code.tsx                       | 47 ++++++++++++++++---
 .../_data.machines._index/dialogs/new.tsx     |  4 +-
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/app/components/Code.tsx b/app/components/Code.tsx
index 0d8fb60..d16d7a3 100644
--- a/app/components/Code.tsx
+++ b/app/components/Code.tsx
@@ -1,12 +1,45 @@
-import clsx from 'clsx'
-import { type HTMLProps } from 'react'
+import { useState, HTMLProps } from 'react'
+import { CopyIcon, CheckIcon } from '@primer/octicons-react'
 
-type Properties = HTMLProps<HTMLSpanElement>
+import { cn } from '~/utils/cn'
+import { toast } from '~/components/Toaster'
+
+interface Props extends HTMLProps<HTMLSpanElement> {
+	isCopyable?: boolean
+}
+
+export default function Code(props: Props) {
+	const [isCopied, setIsCopied] = useState(false)
 
-export default function Code(properties: Properties) {
 	return (
-		<code className={clsx('bg-gray-100 dark:bg-zinc-700 p-0.5 rounded-md', properties.className)}>
-			{properties.children}
-		</code>
+		<>
+			<code className={cn(
+				'bg-ui-100 dark:bg-ui-800 p-0.5 rounded-md',
+				props.className
+			)}>
+				{props.children}
+			</code>
+			{props.isCopyable && (
+				<button
+					className={cn(
+						'ml-1 p-1 rounded-md',
+						'bg-ui-100 dark:bg-ui-800',
+						'text-ui-500 dark:text-ui-400',
+						'inline-flex items-center justify-center'
+					)}
+					onClick={() => {
+						navigator.clipboard.writeText(props.children as string)
+						toast('Copied to clipboard')
+						setIsCopied(true)
+						setTimeout(() => setIsCopied(false), 1000)
+					}}
+				>
+					{isCopied ?
+						<CheckIcon className="h-3 w-3" /> :
+						<CopyIcon className="h-3 w-3" />
+					}
+				</button>
+			)}
+		</>
 	)
 }
diff --git a/app/routes/_data.machines._index/dialogs/new.tsx b/app/routes/_data.machines._index/dialogs/new.tsx
index 429beba..635ad1b 100644
--- a/app/routes/_data.machines._index/dialogs/new.tsx
+++ b/app/routes/_data.machines._index/dialogs/new.tsx
@@ -50,10 +50,8 @@ export default function New(data: NewProps) {
 							<Dialog.Text className='mb-4'>
 								The machine key is given when you run
 								{' '}
-								<Code>
+								<Code isCopyable>
 									tailscale up --login-server=
-								</Code>
-								<Code>
 									{data.server}
 								</Code>
 								{' '}