@jinaan/uikit 0.0.0-stage → 0.1.1

package/src/code-block.tsx

@@ -0,0 +1,53 @@
+import { Check, Copy } from "@phosphor-icons/react";
+import { useState, type ReactNode } from "react";
+
+import { Button } from "./button";
+import { cn } from "./utils";
+
+interface CodeBlockProps {
+  code: string;
+  /** Short label shown in the header (e.g. a filename or request line). */
+  label?: ReactNode;
+  language?: string;
+  className?: string;
+}
+
+export function CodeBlock({ code, label, className }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-lg border border-line bg-canvas",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between gap-2 border-b border-line px-3 py-2">
+        <span className="truncate text-xs font-medium text-subtle">{label}</span>
+        <Button
+          variant="ghost"
+          size="sm"
+          leadingIcon={
+            copied ? <Check className="text-success" weight="bold" /> : <Copy />
+          }
+          onClick={copy}
+        >
+          {copied ? "Copied" : "Copy"}
+        </Button>
+      </div>
+      <pre className="overflow-x-auto p-4 font-mono text-xs leading-relaxed text-fg">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}