Code

import { Code } from "@smallest-inc/ui";

export default function CodeInline() {
  return (
    <p className="text-sm text-fg-secondary">
      Set <Code>max_call_duration</Code> to end calls after a limit, or pass <Code>voice_id</Code> to override the
      agent&apos;s voice.
    </p>
  );
}

import { CodeBlock } from "@smallest-inc/ui";

const code = `import { Button } from "@smallest-inc/ui";

export function DeployAgent({ onDeploy }: { onDeploy: () => void }) {
  return (
    <Button variant="primary" onClick={onDeploy}>
      Deploy agent
    </Button>
  );
}`;

export default function CodeBlockDefault() {
  return (
    <div className="w-full">
      <CodeBlock language="tsx" code={code} />
    </div>
  );
}

import { CodeBlock } from "@smallest-inc/ui";

const install = `pnpm add @smallest-inc/ui`;

const recipe = `pnpm smallest -- button`;

const styles = `@import "tailwindcss";
@import "@smallest-inc/ui/styles.css";`;

const payload = `{
  "event": "call.completed",
  "call_id": "CALL-4506a1f2",
  "duration_seconds": 65,
  "status": "completed"
}`;

export default function CodeBlockLanguages() {
  return (
    <div className="flex w-full flex-col gap-3">
      <CodeBlock language="shell" code={install} />
      <CodeBlock language="bash" code={recipe} />
      <CodeBlock language="css" code={styles} />
      <CodeBlock language="json" code={payload} />
    </div>
  );
}

import { CodeBlock } from "@smallest-inc/ui";

const code = `import { Pill } from "@smallest-inc/ui";

<Pill variant="positive">Live</Pill>;`;

export default function CodeBlockLineNumbers() {
  return (
    <div className="flex w-full flex-col gap-3">
      <CodeBlock language="tsx" code={code} showLineNumbers />
      <CodeBlock language="tsx" code={code} />
    </div>
  );
}