// title: Code file viewer with per-file tabs and copy button "use client"; import { CheckIcon, CopyIcon } from "lucide-react"; import { useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { Tabs, TabsList, TabsPanel, TabsTab } from "@/registry/default/ui/tabs"; const files: Record = { "index.tsx": `import { Button } from "@/components/ui/button" export default function Page() { return (

) }`, "package.json": `{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "next": "15.0.0", "react": "^19.0.0", "tailwindcss": "^4.0.0" }, "scripts": { "dev": "next dev", "build": "next build" } }`, "styles.css": `@import "tailwindcss"; :root { --radius: 0.5rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --muted: oklch(0.97 0 0); }`, }; export function Pattern() { const [active, setActive] = useState("index.tsx"); const [copied, setCopied] = useState(false); const copy = () => { void navigator.clipboard.writeText(files[active] ?? ""); setCopied(true); setTimeout(() => setCopied(false), 1500); }; return (

{Object.keys(files).map((file) => ( {file} ))}

{Object.entries(files).map(([file, content]) => (

              {content}

))}

); }