mirror of
https://github.com/BerriAI/litellm.git
synced 2026-10-07 02:59:05 +00:00
65d90fd5cf
Colocation follow-up to the App Router migration: move each page's owned components out of the shared src/components dump and into its route segment's _components/ folder, draining the shared bucket. Convention: a component used by exactly one segment goes in that segment's _components/ (private, matching Next's _ route-exclusion); a component shared by 2+ segments stays in @/components. No new _shared/ folder. Rename-in-place (segment already had a local components/ folder): - api-reference (also relocates the shared CodeBlock, used by playground and cost-tracking, to @/components/CodeBlock) - memory, budgets, access-groups - caching, projects, guardrails-monitor Extract from src/components (page view lived in the shared dump): - AdminPanel -> admin-panel, organizations -> organizations, general_settings -> router-settings, usage -> old-usage Each folder/view was verified to have no importer other than its own page (cross-checked across src, tests, and e2e_tests). Relative imports inside moved single files are rewritten to absolute @/components/*; colocated tests move with their subject and have their vi.mock paths rewritten to match. Grandfathered lint suppressions (tremor, react-hooks, and similar, all pre-existing) are re-keyed to the new paths with counts unchanged. No behavior change.
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { useState } from "react";
|
|
import { CheckIcon, ClipboardIcon } from "lucide-react";
|
|
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
|
import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
|
|
|
|
interface CodeBlockProps {
|
|
code: string;
|
|
language: string;
|
|
}
|
|
|
|
const CodeBlock = ({ code, language }: CodeBlockProps) => {
|
|
const [copied, setCopied] = useState(false);
|
|
const copyToClipboard = () => {
|
|
navigator.clipboard.writeText(code);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<div className="relative rounded-lg border border-gray-200 overflow-hidden">
|
|
<button
|
|
onClick={copyToClipboard}
|
|
className="absolute top-3 right-3 p-2 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-600 z-10"
|
|
aria-label="Copy code"
|
|
>
|
|
{copied ? <CheckIcon size={16} /> : <ClipboardIcon size={16} />}
|
|
</button>
|
|
<SyntaxHighlighter
|
|
language={language}
|
|
style={oneLight}
|
|
customStyle={{
|
|
margin: 0,
|
|
padding: "1.5rem",
|
|
borderRadius: "0.5rem",
|
|
fontSize: "0.9rem",
|
|
backgroundColor: "#fafafa",
|
|
}}
|
|
showLineNumbers
|
|
>
|
|
{code}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CodeBlock;
|