Updated copy button

Author: ulises-jeremias

src/app/extensions/[slug]/page.tsx

@@ -6,6 +6,7 @@ import { notFound } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 import { AnimatedGradient } from '@/components/animated-gradient';
+import { CopyButton } from '@/components/copy-button';
 import { ParticlesBackground } from '@/components/particles-background';
 import { TemplateCard } from '@/components/template-card';
 import { Badge } from '@/components/ui/badge';
@@ -270,16 +271,13 @@ export default function ExtensionPage({ params }: ExtensionPageProps) {
                     </div>
                   </CardContent>
                   <CardFooter className="flex flex-col items-start gap-4">
-                    <Button
+                    <CopyButton
                       className="w-full bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-500/90 hover:to-purple-500/90 glow transition-all duration-300"
                       onClick={() => {
                         const command = `npx create-awesome-node-app --template [template-name] --addons ${extension.slug}`;
                         navigator.clipboard?.writeText?.(command);
                       }}
-                    >
-                      <Copy className="mr-2 h-4 w-4" />
-                      Copy Command
-                    </Button>
+                    />
                     <Link href={extension.url} className="w-full" target="_blank">
                       <Button
                         variant="outline"

src/app/templates/[slug]/extensions/[extensionSlug]/page.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { ArrowLeft, Check, Copy, Loader2, Package, Puzzle } from 'lucide-react';
+import { ArrowLeft, Check, Loader2, Package, Puzzle } from 'lucide-react';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
 import { AnimatedGradient } from '@/components/animated-gradient';
+import { CopyButton } from '@/components/copy-button';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -419,38 +420,3 @@ export default function TemplateExtensionPage({
     </div>
   );
 }
-
-// Copy button component with copy feedback
-function CopyButton({
-  command,
-  className,
-  size = 'default',
-}: {
-  command: string;
-  className?: string;
-  size?: 'default' | 'sm' | 'lg';
-}) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = () => {
-    navigator.clipboard?.writeText(command);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <Button onClick={handleCopy} className={className} size={size}>
-      {copied ? (
-        <>
-          <Check className="mr-2 h-4 w-4" />
-          Copied!
-        </>
-      ) : (
-        <>
-          <Copy className="mr-2 h-4 w-4" />
-          Copy Command
-        </>
-      )}
-    </Button>
-  );
-}

src/app/templates/[slug]/page.tsx

@@ -6,6 +6,7 @@ import { notFound } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
 import { AnimatedGradient } from '@/components/animated-gradient';
+import { CopyButton } from '@/components/copy-button';
 import { ExtensionCard } from '@/components/extension-card';
 import { ParticlesBackground } from '@/components/particles-background';
 import { TemplateExtensionCombo } from '@/components/template-extension-combo';
@@ -286,9 +287,13 @@ export default function TemplatePage({ params }: { params: Promise<{ slug: strin
                     </div>
                   </CardContent>
                   <CardFooter className="flex flex-col items-start gap-4">
-                    <Button className="w-full bg-gradient-to-r from-primary to-indigo-500 hover:from-primary/90 hover:to-indigo-500/90 glow transition-all duration-300">
-                      Copy Command
-                    </Button>
+                    <CopyButton
+                      className="w-full bg-gradient-to-r from-primary to-indigo-500 hover:from-primary/90 hover:to-indigo-500/90 glow transition-all duration-300"
+                      onClick={() => {
+                        const command = `npx create-awesome-node-app --template [template-name]`;
+                        navigator.clipboard?.writeText?.(command);
+                      }}
+                    />
                     <Link href={template.url} className="w-full" target="_blank">
                       <Button
                         variant="outline"

src/components/copy-button.tsx

@@ -0,0 +1,34 @@
+import { Check, Copy } from 'lucide-react';
+import { useState } from 'react';
+import { Button, ButtonProps } from 'react-day-picker';
+
+export function CopyButton({
+  command,
+  ...props
+}: ButtonProps & {
+  command: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard?.writeText(command);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Button onClick={handleCopy} {...props}>
+      {copied ? (
+        <>
+          <Check className="mr-2 h-4 w-4" />
+          Copied!
+        </>
+      ) : (
+        <>
+          <Copy className="mr-2 h-4 w-4" />
+          Copy Command
+        </>
+      )}
+    </Button>
+  );
+}