fix: clipboard

microlinkhq · Dec 18, 2024 · 23bdccb · 23bdccb
1 parent 6528bfd
commit 23bdccb
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 31 deletions.
diff --git 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'>
@@ -163,14 +159,14 @@ export function ColorExtractor () {
           </div>
           <div className='space-x-2 flex items-center justify-center'>
             <Button
-              onClick={() => copyToClipboard(generateCSSVariables(colors))}
+              onClick={() => copyToClipboard(generateCSSVariables(colors), 'CSS Variables')}
               className='w-auto'
               variant='default'
             >
               Copy as CSS
             </Button>
             <Button
-              onClick={() => copyToClipboard(generateJSONObject(colors))}
+              onClick={() => copyToClipboard(generateJSONObject(colors), 'JSON')}
               className='w-auto'
               variant='secondary'
             >

diff --git 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
@@ -6,22 +6,35 @@ 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.top = '0'
+  textArea.style.left = '0'
+  textArea.style.position = 'fixed'
+  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'
+      })
+    }
+  )
+}