From 13cfa37e3d62abdba009d51fdfa9524f873cb0f6 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Wed, 18 Dec 2024 10:45:52 +0100
Subject: [PATCH] fix: clipboard

---
 website/src/components/color-extractor.tsx | 12 ++----
 website/src/components/faq.tsx             |  9 +++-
 website/src/lib/copy-to-clipboard.tsx      | 49 +++++++++++++---------
 3 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/website/src/components/color-extractor.tsx b/website/src/components/color-extractor.tsx
index 37cf7ee..f34b66a 100644
--- a/website/src/components/color-extractor.tsx
+++ b/website/src/components/color-extractor.tsx
@@ -45,7 +45,7 @@ export function ColorExtractor () {
   const { toast } = useToast()
   const copyToClipboard = creatCopyToClipboard(toast)
 
-  const [imageUrl, setImageUrl] = useState('')
+  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined)
   const [colors, setColors] = useState<ColorFormat[]>([])
   const [isLoading, setIsLoading] = useState(false)
 
@@ -111,7 +111,7 @@ export function ColorExtractor () {
             >
               <input
                 type='url'
-                value={imageUrl}
+                value={undefined}
                 onChange={e => setImageUrl(e.target.value)}
                 onClick={handleFormClick}
                 placeholder='or paste an image URL'
@@ -145,12 +145,8 @@ export function ColorExtractor () {
                 <div
                   onClick={() => copyToClipboard(color.hex, `Color ${color.hex}`)}
                   key={index}
-                  className='cursor-pointer rounded-lg shadow-md'
-                  style={{
-                    height: '6rem',
-                    width: '6rem',
-                    backgroundColor: color.hex
-                  }}
+                  className='cursor-pointer rounded-lg shadow-md lg:h-24 lg:w-24 h-20 w-20'
+                  style={{ backgroundColor: color.hex }}
                 >
                   <div className='w-full h-full flex items-end justify-center p-1 bg-gradient-to-t from-black/50 to-transparent rounded-lg pb-2'>
                     <span className='text-xs text-white font-medium'>
diff --git a/website/src/components/faq.tsx b/website/src/components/faq.tsx
index c84f0e1..47eb022 100644
--- a/website/src/components/faq.tsx
+++ b/website/src/components/faq.tsx
@@ -46,7 +46,7 @@ export function FAQ () {
           </p>
           <Code
             className='pt-6 cursor-pointer'
-            onClick={() => copyToClipboard(microlinkSnippet, 'npm install')}
+            onClick={() => copyToClipboard('npm install splashy --save', 'npm install')}
           >
             npm install splashy --save
           </Code>
@@ -65,7 +65,12 @@ export function FAQ () {
             <Link href='https://microlink.io/docs/api/getting-started/overview'>Microlink API</Link>{' '}
             is already provisioned and ready to be used passing `palette` query parameter:
           </p>
-          <Code className='pt-6'>{microlinkSnippet}</Code>
+          <Code
+            className='pt-6 cursor-pointer'
+            onClick={() => copyToClipboard(microlinkSnippet, 'microlink snippet')}
+          >
+            {microlinkSnippet}
+          </Code>
           <p className='pt-6'>We recommend to consume splashy from Microlink API.</p>
         </div>
         <div>
diff --git a/website/src/lib/copy-to-clipboard.tsx b/website/src/lib/copy-to-clipboard.tsx
index ef1ed9a..6e52661 100644
--- a/website/src/lib/copy-to-clipboard.tsx
+++ b/website/src/lib/copy-to-clipboard.tsx
@@ -6,22 +6,33 @@ type ToastProps = {
 
 type Toast = (props: ToastProps) => void
 
-export const creatCopyToClipboard =
-  (toast: Toast) => (text: string, type?: string) => {
-    navigator.clipboard.writeText(text).then(
-      () => {
-        toast({
-          title: 'Copied to clipboard',
-          description: `${type} has been copied to your clipboard.`
-        })
-      },
-      err => {
-        console.error('Could not copy text: ', err)
-        toast({
-          title: 'Error',
-          description: 'Failed to copy to clipboard.',
-          variant: 'destructive'
-        })
-      }
-    )
-  }
+const toClipboard = async (text: string) => {
+  if (navigator.clipboard) return navigator.clipboard.writeText(text)
+  const textArea = document.createElement('textarea')
+  textArea.value = text
+  textArea.style.visibility = 'hidden'
+  document.body.appendChild(textArea)
+  textArea.focus()
+  textArea.select()
+  document.execCommand('copy')
+  document.body.removeChild(textArea)
+}
+
+export const creatCopyToClipboard = (toast: Toast) => (text: string, type?: string) => {
+  toClipboard(text).then(
+    () => {
+      toast({
+        title: 'Copied to clipboard',
+        description: `${type} has been copied to your clipboard.`
+      })
+    },
+    err => {
+      console.error('Could not copy text: ', err)
+      toast({
+        title: 'Error',
+        description: 'Failed to copy to clipboard.',
+        variant: 'destructive'
+      })
+    }
+  )
+}