Code Block

"use client";
import { DownloadIcon, FileCodeIcon, WrapTextIcon } from "lucide-react";import * as React from "react";import { useHighlightedCode } from "@/hooks/use-highlighted-code";import { Button } from "@/components/ui/button";import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockHeader,	CodeBlockLine,	CodeBlockTitle,} from "@/components/ui/code-block";
const code = `import { streamText } from "ai"
export async function POST(request: Request) {  const { messages } = await request.json()
  const result = streamText({    model: "anthropic/claude-sonnet-4.5",    system: "You are a helpful assistant. Answer in one short paragraph.",    messages,  })
  return result.toUIMessageStreamResponse()}`;
function download(value: string, filename: string) {	const url = URL.createObjectURL(new Blob([value], { type: "text/plain" }));	const link = document.createElement("a");	link.href = url;	link.download = filename;	link.click();	URL.revokeObjectURL(url);}
export function CodeBlockDemo() {	const [wrap, setWrap] = React.useState(false);	const lines = useHighlightedCode(code, "ts");
	return (		<div className="w-full max-w-lg">			<CodeBlock>				<CodeBlockHeader>					<CodeBlockTitle>						<FileCodeIcon />						app/api/chat/route.ts					</CodeBlockTitle>					<CodeBlockActions>						<Button							variant="ghost"							size="icon-xs"							aria-label="Wrap lines"							aria-pressed={wrap}							className="aria-pressed:text-foreground"							onClick={() => setWrap(!wrap)}						>							<WrapTextIcon />						</Button>						<Button							variant="ghost"							size="icon-xs"							aria-label="Download"							onClick={() => download(code, "route.ts")}						>							<DownloadIcon />						</Button>						<CodeBlockCopyButton value={code} />					</CodeBlockActions>				</CodeBlockHeader>				<CodeBlockContent wrap={wrap} lineNumbers>					{lines.map((line, index) => (						<CodeBlockLine							key={index}							variant={index >= 5 && index <= 9 ? "highlighted" : "default"}						>							{line}						</CodeBlockLine>					))}				</CodeBlockContent>			</CodeBlock>		</div>	);}

import {	CodeBlock,	CodeBlockContent,} from "@/components/ui/code-block";
const output = `$ pnpm build> next build
 ✓ Compiled successfully in 4.2s ✓ Generating static pages (12/12)
Route (app)                Size  First Load JS┌ ○ /                    1.9 kB         112 kB├ ○ /_not-found           993 B         103 kB└ ƒ /api/chat             141 B         102 kB`;
export function CodeBlockBasic() {	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockContent>{output}</CodeBlockContent>			</CodeBlock>		</div>	);}

import { TerminalIcon } from "lucide-react";import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockHeader,	CodeBlockTitle,} from "@/components/ui/code-block";
const command = "pnpm add ai @ai-sdk/react zod";
const output = `$ ${command}Packages: +14Progress: resolved 412, reused 398, downloaded 14, added 14, doneDone in 2.8s using pnpm v10.18.0`;
export function CodeBlockHeaderExample() {	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockHeader>					<CodeBlockTitle>						<TerminalIcon />						Terminal					</CodeBlockTitle>					<CodeBlockActions>						<CodeBlockCopyButton value={output} />					</CodeBlockActions>				</CodeBlockHeader>				<CodeBlockContent>{output}</CodeBlockContent>			</CodeBlock>		</div>	);}

"use client";
import { DownloadIcon, TerminalIcon, WrapTextIcon } from "lucide-react";import * as React from "react";import { Button } from "@/components/ui/button";import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockHeader,	CodeBlockTitle,} from "@/components/ui/code-block";
const output = `$ pnpm lintapps/web/components/message-list.tsx  18:22  error  'messages' is possibly 'undefined'. Add a guard before calling map  42:7   warning  React Hook React.useEffect has a missing dependency: 'scrollToBottom'
✖ 2 problems (1 error, 1 warning)`;
function download(value: string, filename: string) {	const url = URL.createObjectURL(new Blob([value], { type: "text/plain" }));	const link = document.createElement("a");	link.href = url;	link.download = filename;	link.click();	URL.revokeObjectURL(url);}
export function CodeBlockActionsExample() {	const [wrap, setWrap] = React.useState(true);
	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockHeader>					<CodeBlockTitle>						<TerminalIcon />						Terminal					</CodeBlockTitle>					<CodeBlockActions>						<Button							variant="ghost"							size="icon-xs"							aria-label="Wrap lines"							aria-pressed={wrap}							className="aria-pressed:text-foreground"							onClick={() => setWrap(!wrap)}						>							<WrapTextIcon />						</Button>						<Button							variant="ghost"							size="icon-xs"							aria-label="Download"							onClick={() => download(output, "lint.log")}						>							<DownloadIcon />						</Button>						<CodeBlockCopyButton value={output} />					</CodeBlockActions>				</CodeBlockHeader>				<CodeBlockContent wrap={wrap}>{output}</CodeBlockContent>			</CodeBlock>		</div>	);}

import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,} from "@/components/ui/code-block";
const output = `$ pnpm add ai @ai-sdk/react zodProgress: resolved 412, reused 398, downloaded 14, added 14, donedependencies:+ @ai-sdk/react 3.0.12+ ai 6.0.12+ zod 4.1.12Done in 2.8s using pnpm v10.18.0`;
export function CodeBlockFloating() {	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockActions>					<CodeBlockCopyButton value={output} />				</CodeBlockActions>				<CodeBlockContent>{output}</CodeBlockContent>			</CodeBlock>		</div>	);}

import {	CodeBlock,	CodeBlockContent,} from "@/components/ui/code-block";
const code = `{  "name": "chat",  "private": true,  "scripts": {    "dev": "next dev",    "build": "next build"  }}`;
export function CodeBlockLineNumbers() {	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockContent lineNumbers>{code}</CodeBlockContent>			</CodeBlock>		</div>	);}

"use client";
import { useHighlightedCode } from "@/hooks/use-highlighted-code";import {	CodeBlock,	CodeBlockContent,	CodeBlockHeader,	CodeBlockLine,	CodeBlockTitle,} from "@/components/ui/code-block";
const code = `  if (!session) {    redirect("/login")  }
  const projects = await db.project.findMany({    where: { ownerId: session.user.id },    orderBy: { updatedAt: "desc" },  })
  return <ProjectList projects={projects} />}`;
export function CodeBlockStartLine() {	const lines = useHighlightedCode(code, "tsx");
	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockHeader>					<CodeBlockTitle>app/dashboard/page.tsx</CodeBlockTitle>				</CodeBlockHeader>				<CodeBlockContent lineNumbers startLine={995}>					{lines.map((line, index) => (						<CodeBlockLine key={index}>{line}</CodeBlockLine>					))}				</CodeBlockContent>			</CodeBlock>		</div>	);}

import {	CodeBlock,	CodeBlockContent,} from "@/components/ui/code-block";
const output = `Error: The model "anthropic/claude-sonnet-4.5" returned an error: Request too large. The prompt is 212,431 tokens and the context window is 200,000 tokens. Remove some messages or summarize the conversation and try again.`;
export function CodeBlockWrap() {	return (		<div className="flex w-full max-w-md flex-col gap-4">			<CodeBlock>				<CodeBlockContent>{output}</CodeBlockContent>			</CodeBlock>			<CodeBlock>				<CodeBlockContent wrap>{output}</CodeBlockContent>			</CodeBlock>		</div>	);}

import {	CodeBlock,	CodeBlockContent,	CodeBlockLine,} from "@/components/ui/code-block";
const code = `export {  experimental: {    reactCompiler: true,    viewTransition: true,  },  images: {    remotePatterns: [{ hostname: "avatars.githubusercontent.com" }],  },}`;
const highlighted = [2, 3];
export function CodeBlockHighlighted() {	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockContent lineNumbers>					{code.split("\n").map((line, index) => (						<CodeBlockLine							key={index}							variant={highlighted.includes(index) ? "highlighted" : "default"}						>							{line}						</CodeBlockLine>					))}				</CodeBlockContent>			</CodeBlock>		</div>	);}

import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockHeader,	CodeBlockLine,	CodeBlockTitle,} from "@/components/ui/code-block";
const patch = ` export function Greeting({ name }: { name: string }) {-  return <p>Hello, {name}</p>+  return <p className="text-sm text-muted-foreground">+    Hello, {name}!+  </p> }`;
function getVariant(line: string) {	if (line.startsWith("+")) {		return "added" as const;	}
	if (line.startsWith("-")) {		return "removed" as const;	}
	return "default" as const;}
export function CodeBlockDiff() {	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockHeader>					<CodeBlockTitle>components/greeting.tsx</CodeBlockTitle>					<CodeBlockActions>						<CodeBlockCopyButton value={patch} />					</CodeBlockActions>				</CodeBlockHeader>				<CodeBlockContent>					{patch.split("\n").map((line, index) => (						<CodeBlockLine key={index} variant={getVariant(line)}>							{line.slice(1)}						</CodeBlockLine>					))}				</CodeBlockContent>			</CodeBlock>		</div>	);}

import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockHeader,	CodeBlockTitle,} from "@/components/ui/code-block";
const logs = Array.from(	{ length: 40 },	(_, index) =>		`[${String(index + 1).padStart(2, "0")}] GET /api/chat 200 in ${12 + ((index * 7) % 40)}ms`,).join("\n");
export function CodeBlockHeight() {	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockHeader>					<CodeBlockTitle>Logs</CodeBlockTitle>					<CodeBlockActions>						<CodeBlockCopyButton value={logs} />					</CodeBlockActions>				</CodeBlockHeader>				<CodeBlockContent className="max-h-48">{logs}</CodeBlockContent>			</CodeBlock>		</div>	);}

"use client";
import { ChevronDownIcon } from "lucide-react";import * as React from "react";import { useHighlightedCode } from "@/hooks/use-highlighted-code";import { Button } from "@/components/ui/button";import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockFooter,	CodeBlockHeader,	CodeBlockLine,	CodeBlockTitle,} from "@/components/ui/code-block";
const code = `"use client"
import * as React from "react"import { useChat } from "@ai-sdk/react"
import { Button } from "@/components/ui/button"import { Input } from "@/components/ui/input"
export function Chat() {  const [input, setInput] = React.useState("")  const { messages, sendMessage, status } = useChat()
  return (    <div className="flex flex-col gap-4">      {messages.map((message) => (        <div key={message.id}>          {message.parts.map((part, index) =>            part.type === "text" ? <p key={index}>{part.text}</p> : null          )}        </div>      ))}      <form        onSubmit={(event) => {          event.preventDefault()          sendMessage({ text: input })          setInput("")        }}      >        <Input value={input} onChange={(event) => setInput(event.target.value)} />        <Button disabled={status !== "ready"}>Send</Button>      </form>    </div>  )}`;
export function CodeBlockShowMore() {	const [expanded, setExpanded] = React.useState(false);	const lines = useHighlightedCode(code, "tsx");	const id = React.useId();
	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockHeader>					<CodeBlockTitle>components/chat.tsx</CodeBlockTitle>					<CodeBlockActions>						<CodeBlockCopyButton value={code} />					</CodeBlockActions>				</CodeBlockHeader>				<CodeBlockContent					id={id}					lineNumbers					className={expanded ? undefined : "max-h-64 overflow-y-hidden"}				>					{lines.map((line, index) => (						<CodeBlockLine key={index}>{line}</CodeBlockLine>					))}				</CodeBlockContent>				<CodeBlockFooter className="justify-center">					<Button						variant="ghost"						size="xs"						aria-expanded={expanded}						aria-controls={id}						onClick={() => setExpanded(!expanded)}					>						<ChevronDownIcon className="in-aria-expanded:rotate-180 transition-transform" />						{expanded ? "Show less" : "Show more"}					</Button>				</CodeBlockFooter>			</CodeBlock>		</div>	);}

import { TerminalIcon } from "lucide-react";import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockHeader,	CodeBlockTitle,} from "@/components/ui/code-block";
const output = `$ pnpm add ai @ai-sdk/react zodProgress: resolved 412, reused 398, downloaded 14, added 14, doneDone in 2.8s using pnpm v10.18.0`;
export function CodeBlockSize() {	return (		<div className="flex w-full max-w-md flex-col gap-4">			<CodeBlock>				<CodeBlockHeader>					<CodeBlockTitle>						<TerminalIcon />						Terminal					</CodeBlockTitle>					<CodeBlockActions>						<CodeBlockCopyButton value={output} />					</CodeBlockActions>				</CodeBlockHeader>				<CodeBlockContent wrap>{output}</CodeBlockContent>			</CodeBlock>			<CodeBlock size="sm">				<CodeBlockHeader>					<CodeBlockTitle>						<TerminalIcon />						Terminal					</CodeBlockTitle>					<CodeBlockActions>						<CodeBlockCopyButton value={output} />					</CodeBlockActions>				</CodeBlockHeader>				<CodeBlockContent wrap>{output}</CodeBlockContent>			</CodeBlock>		</div>	);}

import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockHeader,	CodeBlockTitle,} from "@/components/ui/code-block";
const error = `TypeError: Cannot read properties of undefined (reading 'map')    at MessageList (components/message-list.tsx:18:22)    at renderWithHooks (react-dom.development.js:16305:18)`;
export function CodeBlockDestructive() {	return (		<div className="w-full max-w-md">			<CodeBlock variant="destructive">				<CodeBlockHeader>					<CodeBlockTitle>Error</CodeBlockTitle>					<CodeBlockActions>						<CodeBlockCopyButton value={error} />					</CodeBlockActions>				</CodeBlockHeader>				<CodeBlockContent wrap>{error}</CodeBlockContent>			</CodeBlock>		</div>	);}

import { TerminalIcon } from "lucide-react";import {	CodeBlock,	CodeBlockContent,} from "@/components/ui/code-block";import {	Trace,	TraceCollapsible,	TraceCollapsibleContent,	TraceCollapsibleTrigger,	TraceIcon,	TraceLine,	TraceTitle,} from "@/components/ui/trace";
const output = `$ node --versionv24.18.0`;
const error = `$ pnpm devError: listen EADDRINUSE: address already in use :::3000    at Server.setupListenHandle [as _listen2] (node:net:1908:16)`;
export function CodeBlockTrace() {	return (		<div className="w-full max-w-md">			<Trace>				<TraceCollapsible defaultOpen>					<TraceCollapsibleTrigger>						<TraceLine>							<TraceIcon>								<TerminalIcon />							</TraceIcon>							<TraceTitle>Ran node --version</TraceTitle>						</TraceLine>					</TraceCollapsibleTrigger>					<TraceCollapsibleContent>						<CodeBlock size="sm">							<CodeBlockContent wrap className="max-h-64">								{output}							</CodeBlockContent>						</CodeBlock>					</TraceCollapsibleContent>				</TraceCollapsible>				<TraceCollapsible defaultOpen>					<TraceCollapsibleTrigger>						<TraceLine status="error">							<TraceIcon>								<TerminalIcon />							</TraceIcon>							<TraceTitle>Failed to run pnpm dev</TraceTitle>						</TraceLine>					</TraceCollapsibleTrigger>					<TraceCollapsibleContent>						<CodeBlock size="sm" variant="destructive">							<CodeBlockContent wrap className="max-h-64">								{error}							</CodeBlockContent>						</CodeBlock>					</TraceCollapsibleContent>				</TraceCollapsible>			</Trace>		</div>	);}

"use client";
import { useHighlightedCode } from "@/hooks/use-highlighted-code";import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockHeader,	CodeBlockLine,	CodeBlockTitle,} from "@/components/ui/code-block";import {	Tabs,	TabsContent,	TabsList,	TabsTrigger,} from "@/components/ui/tabs";
const files = [	{		id: "route",		title: "app/api/chat/route.ts",		language: "ts",		code: `import { streamText } from "ai"
export async function POST(request: Request) {  const { messages } = await request.json()  const result = streamText({ model: "anthropic/claude-sonnet-4.5", messages })
  return result.toUIMessageStreamResponse()}`,	},	{		id: "chat",		title: "components/chat.tsx",		language: "tsx",		code: `"use client"
import { useChat } from "@ai-sdk/react"
export function Chat() {  const { messages } = useChat()
  return <MessageList messages={messages} />}`,	},	{		id: "env",		title: ".env.local",		language: "bash",		code: "AI_GATEWAY_API_KEY=your-api-key",	},];
function FileCode({ code, language }: { code: string; language: string }) {	const lines = useHighlightedCode(code, language);
	return (		<CodeBlockContent lineNumbers>			{lines.map((line, index) => (				<CodeBlockLine key={index}>{line}</CodeBlockLine>			))}		</CodeBlockContent>	);}
export function CodeBlockTabs() {	return (		<Tabs defaultValue="route" className="w-full max-w-md">			<TabsList>				{files.map((file) => (					<TabsTrigger key={file.id} value={file.id}>						{file.title.split("/").at(-1)}					</TabsTrigger>				))}			</TabsList>			{files.map((file) => (				<TabsContent key={file.id} value={file.id}>					<CodeBlock>						<CodeBlockHeader>							<CodeBlockTitle>{file.title}</CodeBlockTitle>							<CodeBlockActions>								<CodeBlockCopyButton value={file.code} />							</CodeBlockActions>						</CodeBlockHeader>						<FileCode code={file.code} language={file.language} />					</CodeBlock>				</TabsContent>			))}		</Tabs>	);}

"use client";
import { useHighlightedCode } from "@/hooks/use-highlighted-code";import { Bubble, BubbleContent } from "@/components/ui/bubble";import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockHeader,	CodeBlockLine,	CodeBlockTitle,} from "@/components/ui/code-block";import { Message, MessageContent } from "@/components/ui/message";
const code = `import { streamText } from "ai"
export async function POST(request: Request) {  const { messages } = await request.json()
  const result = streamText({    model: "anthropic/claude-sonnet-4.5",    messages,  })
  return result.toUIMessageStreamResponse()}`;
export function CodeBlockMessage() {	const lines = useHighlightedCode(code, "ts");
	return (		<div className="flex w-full max-w-md flex-col gap-4 text-sm">			<Message align="end">				<MessageContent>					<Bubble align="end" variant="muted">						<BubbleContent>How do I stream a response?</BubbleContent>					</Bubble>				</MessageContent>			</Message>			<Message>				<MessageContent className="gap-3">					<p>Create a route handler that returns the stream:</p>					<CodeBlock>						<CodeBlockHeader>							<CodeBlockTitle>app/api/chat/route.ts</CodeBlockTitle>							<CodeBlockActions>								<CodeBlockCopyButton value={code} />							</CodeBlockActions>						</CodeBlockHeader>						<CodeBlockContent>							{lines.map((line, index) => (								<CodeBlockLine key={index}>{line}</CodeBlockLine>							))}						</CodeBlockContent>					</CodeBlock>					<p>The client reads it with useChat.</p>				</MessageContent>			</Message>		</div>	);}

"use client";
import { TerminalIcon } from "lucide-react";import {	type Translations,	useTranslation,} from "@/components/language-selector";import { useHighlightedCode } from "@/hooks/use-highlighted-code";import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockHeader,	CodeBlockLine,	CodeBlockTitle,} from "@/components/ui/code-block";
const translations: Translations = {	en: {		dir: "ltr",		values: {			description: "Install the packages, then start the dev server.",			title: "Terminal",		},	},	ar: {		dir: "rtl",		values: {			description: "ثبّت الحزم، ثم شغّل خادم التطوير.",			title: "الطرفية",		},	},	he: {		dir: "rtl",		values: {			description: "התקן את החבילות, ואז הפעל את שרת הפיתוח.",			title: "מסוף",		},	},};
const code = `pnpm add ai @ai-sdk/react zodpnpm dev`;
export function CodeBlockRtl() {	const { dir, language, t } = useTranslation(translations, "ar");	const lines = useHighlightedCode(code, "bash");
	return (		<div			className="flex w-full max-w-md flex-col gap-3 text-sm"			lang={language}			dir={dir}		>			<p>{t.description}</p>			<CodeBlock>				<CodeBlockHeader>					<CodeBlockTitle>						<TerminalIcon />						{t.title}					</CodeBlockTitle>					<CodeBlockActions>						<CodeBlockCopyButton value={code} />					</CodeBlockActions>				</CodeBlockHeader>				<CodeBlockContent lineNumbers>					{lines.map((line, index) => (						<CodeBlockLine key={index}>{line}</CodeBlockLine>					))}				</CodeBlockContent>			</CodeBlock>		</div>	);}

"use client";
import { useHighlightedCode } from "@/hooks/use-highlighted-code";import {	CodeBlock,	CodeBlockContent,	CodeBlockHeader,	CodeBlockLine,	CodeBlockTitle,} from "@/components/ui/code-block";
const code = `{  "location": "San Francisco",  "temperature": 18,  "unit": "celsius",  "conditions": ["fog", "wind"]}`;
export function CodeBlockHighlighting() {	const lines = useHighlightedCode(code, "json");
	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockHeader>					<CodeBlockTitle>getWeather output</CodeBlockTitle>				</CodeBlockHeader>				<CodeBlockContent>					{lines.map((line, index) => (						<CodeBlockLine key={index}>{line}</CodeBlockLine>					))}				</CodeBlockContent>			</CodeBlock>		</div>	);}

"use client";
import { useHighlightedCode } from "@/hooks/use-highlighted-code";import {	CodeBlock,	CodeBlockContent,	CodeBlockHeader,	CodeBlockLine,	CodeBlockTitle,} from "@/components/ui/code-block";
const samples = [	{		language: "css",		title: "app/globals.css",		code: `@import "tailwindcss";
:root {  --radius: 0.625rem;}`,	},	{		language: "python",		title: "main.py",		code: `def greet(name: str) -> str:    return f"Hello, {name}!"`,	},	{		language: "text",		title: "notes.txt",		code: "A language that is not in the list renders as plain text.",	},];
function Sample({ code, language }: { code: string; language: string }) {	const lines = useHighlightedCode(code, language);
	return (		<CodeBlockContent>			{lines.map((line, index) => (				<CodeBlockLine key={index}>{line}</CodeBlockLine>			))}		</CodeBlockContent>	);}
export function CodeBlockLanguages() {	return (		<div className="flex w-full max-w-md flex-col gap-4">			{samples.map((sample) => (				<CodeBlock key={sample.language}>					<CodeBlockHeader>						<CodeBlockTitle>{sample.title}</CodeBlockTitle>					</CodeBlockHeader>					<Sample code={sample.code} language={sample.language} />				</CodeBlock>			))}		</div>	);}

"use client";
import { TerminalIcon } from "lucide-react";import { useHighlightedCode } from "@/hooks/use-highlighted-code";import {	CodeBlock,	CodeBlockActions,	CodeBlockContent,	CodeBlockCopyButton,	CodeBlockHeader,	CodeBlockLine,	CodeBlockTitle,} from "@/components/ui/code-block";
const output = `$ pnpm test\x1b[32m✓\x1b[39m src/format.test.ts \x1b[2m(4 tests)\x1b[22m\x1b[32m✓\x1b[39m src/parse.test.ts \x1b[2m(7 tests)\x1b[22m\x1b[31m✗\x1b[39m src/stream.test.ts \x1b[2m(3 tests | 1 failed)\x1b[22m
\x1b[31mAssertionError: expected 'hello' to be 'hello world'\x1b[39m
Tests  \x1b[31m1 failed\x1b[39m | \x1b[32m13 passed\x1b[39m (14)`;
export function CodeBlockAnsi() {	const lines = useHighlightedCode(output, "ansi");
	return (		<div className="w-full max-w-md">			<CodeBlock>				<CodeBlockHeader>					<CodeBlockTitle>						<TerminalIcon />						Terminal					</CodeBlockTitle>					<CodeBlockActions>						{/* biome-ignore lint/suspicious/noControlCharactersInRegex: matches ANSI escape sequences */}						<CodeBlockCopyButton value={output.replace(/\x1b\[[\d;]*m/g, "")} />					</CodeBlockActions>				</CodeBlockHeader>				<CodeBlockContent wrap>					{lines.map((line, index) => (						<CodeBlockLine key={index}>{line}</CodeBlockLine>					))}				</CodeBlockContent>			</CodeBlock>		</div>	);}