feat: copy shortlink micro interaction (#178)

apps/masterbots.ai/app/globals.css

@@ -45,6 +45,12 @@
     --link: 208, 100%, 60%;
     --mirage: 217, 33%, 17%;
     --iron: 240, 6%, 90%;
+
+    --mb-gradient: linear-gradient(
+      21deg,
+      rgba(16, 171, 255, 0.7),
+      rgba(27, 234, 189, 0.6)
+    );
   }
 
   .dark {
@@ -170,11 +176,7 @@
 /* Input specific styles */
 .gradient-input {
   position: relative; /* Set to relative for proper positioning of child elements */
-  background: linear-gradient(
-    21deg,
-    #10abff,
-    #1beabd
-  ); /* Gradient background */
+  background: var(--mb-gradient);
   padding: 2px; /* Padding around the input for border effect */
   display: inline-block; /* Default display to inline for inline fields */
   border-radius: 9999em; /* Circular border radius */

apps/masterbots.ai/components/shared/copy-shortlink.tsx

@@ -1,28 +1,45 @@
 'use client'
 
-import { CopyIcon } from 'lucide-react'
+import { Check, CopyIcon, LoaderCircle } from 'lucide-react'
 import { shorten } from '@/app/actions'
+import { useAsyncFn } from 'react-use'
+import { cn } from '@/lib/utils'
 
 export default function Shortlink() {
+  // for local dev
   const url = window.location.href.replace(
     'http://localhost:3000',
-    'https://dev.masterbots.ai'
+    'https://alpha.masterbots.ai'
   )
 
+  const [shortlink, getShortlink] = useAsyncFn(async () => {
+    const formData = new FormData()
+    formData.set('url', url)
+    const { shortLink } = await shorten({}, formData)
+    return navigator.clipboard.writeText(shortLink).then(() => shortLink)
+  })
+
   const handleIconClick = async (e: any) => {
     // Stop propagation to prevent form submission when clicking on the icon
     e.preventDefault()
     e.stopPropagation()
-    const formData = new FormData()
-    formData.set('url', url)
-    const { shortLink } = await shorten({}, formData)
-    navigator.clipboard
-      .writeText(shortLink)
-      .then(() => { console.log('Shortlink copied to clipboard'); })
-      .catch(error =>
-        { console.error('Error copying shortlink to clipboard: ', error); }
-      )
+    getShortlink()
   }
 
-  return <CopyIcon className="pointer" onClick={handleIconClick} size={15} />
+  const Icon = shortlink.value
+    ? Check
+    : shortlink.loading
+      ? LoaderCircle
+      : CopyIcon
+
+  return (
+    <Icon
+      className={cn(
+        'pointer transition-all',
+        shortlink.loading && 'animate-spin'
+      )}
+      onClick={handleIconClick}
+      size={15}
+    />
+  )
 }

apps/masterbots.ai/package.json

@@ -50,7 +50,7 @@
     "framer-motion": "^10.16.12",
     "geist": "^1.1.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.297.0",
+    "lucide-react": "latest",
     "nanoid": "^3.0.0",
     "next": "latest",
     "next-themes": "^0.2.1",

packages/config-tailwind/tailwind.config.ts

@@ -80,6 +80,11 @@ const config: Omit<Config, "content"> = {
           },
           to: { opacity: 0 },
         },
+        spin: {
+          '0%': { transform: 'rotate(0deg)' },
+          '100%': { transform: 'rotate(360deg)' },
+               spin: 'spin 1s linear infinite'
+        }
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",