// title: Code editor toolbar with language select, word wrap, copy, and run "use client"; import { CheckIcon, CopyIcon, PlayIcon, WrapTextIcon } from "lucide-react"; import { useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue, } from "@/registry/default/ui/select"; import { ToggleGroup, ToggleGroupItem, } from "@/registry/default/ui/toggle-group"; import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, } from "@/registry/default/ui/toolbar"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/default/ui/tooltip"; const languages = [ { label: "TypeScript", value: "typescript" }, { label: "JavaScript", value: "javascript" }, { label: "Python", value: "python" }, { label: "Rust", value: "rust" }, { label: "Go", value: "go" }, ]; const SNIPPET = `function greet(name: string): string { return \`Hello, \${name}!\`; }`; export function Pattern() { const [copied, setCopied] = useState(false); const [running, setRunning] = useState(false); const copy = () => { void navigator.clipboard.writeText(SNIPPET); setCopied(true); setTimeout(() => setCopied(false), 1500); }; const run = () => { setRunning(true); setTimeout(() => setRunning(false), 1000); }; return ( } > } /> Word wrap } > {copied ? ( ) : ( )} } /> {copied ? "Copied!" : "Copy code"} } > {!running && } {running ? "Running…" : "Run"} ); }