site: add cli command component

Author: coadler

site/components/layout.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { useState } from "react";
-import { Star, Copy, Plug, Plug2, PlugZap, Download } from "lucide-react";
+import { Star, Plug, PlugZap, Download } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useWasm } from "@/context/wush";

site/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

site/components/ui/cli-command.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { Check, Copy } from "lucide-react";
+
+interface CliCommandCardProps {
+  command: string;
+}
+
+export function CliCommandCard({ command }: CliCommandCardProps) {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(command);
+      setIsCopied(true);
+      toast.success("Command copied to clipboard");
+      setTimeout(() => setIsCopied(false), 2000);
+    } catch (err) {
+      toast.error("Failed to copy command");
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-2xl">
+      <CardContent className="p-2 flex items-center justify-between border-gray-600 bg-gray-700 rounded">
+        <code className="text-sm bg-muted px-[0.3rem] py-[0.2rem] rounded font-mono flex-grow mr-2 overflow-x-auto">
+          {command}
+        </code>
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={copyToClipboard}
+          className="flex-shrink-0 relative overflow-hidden"
+        >
+          <span
+            className={`absolute inset-0 flex items-center justify-center transition-transform duration-300 ${
+              isCopied ? "translate-y-full" : "translate-y-0"
+            }`}
+          >
+            <Copy className="h-4 w-4" />
+          </span>
+          <span
+            className={`absolute inset-0 flex items-center justify-center transition-transform duration-300 ${
+              isCopied ? "translate-y-0" : "-translate-y-full"
+            }`}
+          >
+            <Check className="h-4 w-4" />
+          </span>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}