feat: Button to copy the contents of the Migration tab to the clipboard

apps/postgres-new/components/copy-button.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { useState } from 'react'
+import { Button } from './ui/button'
+import { Check, Copy } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip'
+
+export type CopyButtonProps = {
+  value: string
+  className?: string
+  tooltipContent?: string
+}
+
+export default function CopyButton({
+  value,
+  className,
+  tooltipContent = 'Copy migrations',
+}: CopyButtonProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(value)
+    setCopied(true)
+    setTimeout(() => {
+      setCopied(false)
+    }, 1000)
+  }
+
+  return (
+    <>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="icon" className={className} onClick={handleCopy}>
+              {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltipContent}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </>
+  )
+}

apps/postgres-new/components/ide.tsx

@@ -2,7 +2,7 @@
 
 import { Editor } from '@monaco-editor/react'
 import { ParseResult } from 'libpg-query/wasm'
-import { FileCode, MessageSquareMore, Sprout, Workflow } from 'lucide-react'
+import { Check, CheckCheck, Copy, FileCode, MessageSquareMore, Sprout, Workflow } from 'lucide-react'
 import { PropsWithChildren, useEffect, useState } from 'react'
 import { format } from 'sql-formatter'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs'
@@ -16,7 +16,8 @@ import { cn } from '~/lib/utils'
 import { useApp } from './app-provider'
 import SchemaGraph from './schema/graph'
 import { useWorkspace } from './workspace'
-import { buttonVariants } from './ui/button'
+import { Button, buttonVariants } from './ui/button'
+import CopyButton from './copy-button'
 
 const initialMigrationSql = '-- Migrations will appear here as you chat with AI\n'
 const initialSeedSql = '-- Seeds will appear here as you chat with AI\n'
@@ -171,6 +172,11 @@ export default function IDE({ children, className }: IDEProps) {
         </TabsContent>
         <TabsContent value="migrations" className="h-full">
           <div className="h-full flex flex-col gap-3">
+
+            <div className="relative">
+              <CopyButton value={migrationsSql} className="absolute top-4 right-4 z-10" />
+            </div>
+
             <Editor
               className=" py-4 rounded-md bg-[#1e1e1e]"
               language="pgsql"