feat: add copy to clipboard icon

Author: arav-ind

components/output-text.tsx

@@ -1,15 +1,22 @@
+import { Clipboard } from 'lucide-react'
 import { SkeletonCard } from './skeleton-card'
+import { Button } from './ui/button'
 
 export default function OutputText({ text, isFetching }: { text: string | null, isFetching: boolean }) {
     const sanitizedText = text?.replace(/<p.*?>|<\/p>/g, '')
     if (isFetching) {
         return <SkeletonCard />
+    } else if (!sanitizedText) {
+        return null
     }
     return (
         <>
-            <p className='leading-loose'>
-                {sanitizedText}
-            </p>
+            <div className='relative flex flex-col gap-2'>
+                <Button variant="outline" size="icon" className='self-end h-5 w-5'>
+                    <Clipboard />
+                </Button>
+                <p className='leading-loose'>{sanitizedText}</p>
+            </div>
         </>
     )
 }

components/skeleton-card.tsx

@@ -5,6 +5,7 @@ export function SkeletonCard() {
     const isMobile = useIsMobile()
     return (
         <div className='flex flex-col gap-3'>
+            <Skeleton className='h-5 w-5 self-end' />
             <Skeleton className='h-4 w-[100%]' />
             <Skeleton className='h-4 w-[100%]' />
             <Skeleton className='h-4 w-[100%]' />