Code Block

'use client';

import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockPanel,
  CodeBlockTab,
  CodeBlockTabs,
} from '@brika/clay/components/code-block';
import { FileCode, Palette } from 'lucide-react';

const BUTTON_TSX = `import "./button.css";

export function Button(props) {
  return <button className="btn" {...props} />;
}`;

const BUTTON_CSS = `.btn {
  border-radius: var(--radius-control);
  padding: 0.5rem 1rem;
}`;

const INDEX_TS = `export { Button } from "./button";
export type { ButtonProps } from "./button";`;

/** Switch between several files with a header tab bar; each tab can carry a file-type icon. */
export default function CodeBlockMultipleFilesDemo() {
  return (
    <CodeBlock className="w-full max-w-lg" defaultValue="button.tsx">
      <CodeBlockHeader>
        <CodeBlockTabs>
          <CodeBlockTab value="button.tsx" icon={<FileCode />}>
            button.tsx
          </CodeBlockTab>
          <CodeBlockTab value="button.css" icon={<Palette />}>
            button.css
          </CodeBlockTab>
          <CodeBlockTab value="index.ts" icon={<FileCode />}>
            index.ts
          </CodeBlockTab>
        </CodeBlockTabs>
        <CodeBlockActions>
          <CodeBlockCopyButton />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockPanel value="button.tsx">
        <CodeBlockContent language="tsx" filename="button.tsx">
          {BUTTON_TSX}
        </CodeBlockContent>
      </CodeBlockPanel>
      <CodeBlockPanel value="button.css">
        <CodeBlockContent language="css" filename="button.css">
          {BUTTON_CSS}
        </CodeBlockContent>
      </CodeBlockPanel>
      <CodeBlockPanel value="index.ts">
        <CodeBlockContent language="ts" filename="index.ts">
          {INDEX_TS}
        </CodeBlockContent>
      </CodeBlockPanel>
    </CodeBlock>
  );
}

'use client';

import {
  CodeBlock,
  CodeBlockContent,
  CodeBlockCopyButton,
} from '@brika/clay/components/code-block';

const SAMPLE = `export function greet(name: string) {
  return \`Hello, \${name}!\`;
}`;

/** Omit the header entirely and float the copy button over the code. */
export default function CodeBlockNoHeaderDemo() {
  return (
    <CodeBlock className="w-full max-w-lg">
      <CodeBlockCopyButton className="absolute top-2 right-2 z-10" />
      <CodeBlockContent language="tsx" filename="greet.ts">
        {SAMPLE}
      </CodeBlockContent>
    </CodeBlock>
  );
}

'use client';

import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockPanel,
  CodeBlockSelect,
  CodeBlockSelectItem,
} from '@brika/clay/components/code-block';
import { FileCode, FileJson, Palette } from 'lucide-react';
import type { ReactNode } from 'react';

interface DemoFile {
  readonly name: string;
  readonly language: string;
  readonly icon: ReactNode;
  readonly code: string;
}

const APP_TSX = `import { Header } from "./header";

export function App() {
  return <Header title="Clay" />;
}`;

const HEADER_TSX = `export function Header({ title }: { title: string }) {
  return <h1 className="title">{title}</h1>;
}`;

const STYLES_CSS = `.title {
  font-weight: 600;
  letter-spacing: -0.02em;
}`;

const TSCONFIG_JSON = `{
  "compilerOptions": {
    "jsx": "react-jsx",
    "strict": true
  }
}`;

const FILES: readonly DemoFile[] = [
  { name: 'app.tsx', language: 'tsx', icon: <FileCode />, code: APP_TSX },
  { name: 'header.tsx', language: 'tsx', icon: <FileCode />, code: HEADER_TSX },
  { name: 'styles.css', language: 'css', icon: <Palette />, code: STYLES_CSS },
  { name: 'tsconfig.json', language: 'json', icon: <FileJson />, code: TSCONFIG_JSON },
];

/** A dropdown scales better than tabs when there are many files; each item can carry a file-type icon. */
export default function CodeBlockSelectFilesDemo() {
  return (
    <CodeBlock className="w-full max-w-lg" defaultValue="app.tsx">
      <CodeBlockHeader>
        <CodeBlockSelect>
          {FILES.map((file) => (
            <CodeBlockSelectItem key={file.name} value={file.name} icon={file.icon}>
              {file.name}
            </CodeBlockSelectItem>
          ))}
        </CodeBlockSelect>
        <CodeBlockActions>
          <CodeBlockCopyButton />
        </CodeBlockActions>
      </CodeBlockHeader>
      {FILES.map((file) => (
        <CodeBlockPanel key={file.name} value={file.name}>
          <CodeBlockContent language={file.language} filename={file.name}>
            {file.code}
          </CodeBlockContent>
        </CodeBlockPanel>
      ))}
    </CodeBlock>
  );
}