Code

import { Code } from "@/components/ui/code";

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

export default function CodeDemo() {
  return (
    <div className="w-full max-w-[520px]">
      <Code filename="greet.ts" language="typescript" code={SAMPLE} />
    </div>
  );
}

import { Code } from "@/components/ui/code";

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

export default function CodeBasic() {
  return (
    <div className="w-full max-w-[520px]">
      <Code language="typescript" code={SAMPLE} />
    </div>
  );
}

import { Code } from "@/components/ui/code";
import { PATRICK_DARK } from "@/lib/docs/code-themes";

const RUST_SAMPLE = `use std::collections::HashMap;

/// Counts how many times each word appears.
pub fn word_counts(text: &str) -> HashMap<String, usize> {
    let mut counts: HashMap<String, usize> = HashMap::new();

    for word in text.split_whitespace() {
        let key = word.trim_matches(|c: char| !c.is_alphanumeric());
        if key.is_empty() {
            continue;
        }
        *counts.entry(key.to_lowercase()).or_insert(0) += 1;
    }

    counts
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn counts_repeats() {
        let counts = word_counts("the cat the hat");
        assert_eq!(counts["the"], 2);
    }
}`;

export default function CodeCustomTheme() {
  return (
    <div className="w-full max-w-[520px]">
      <Code
        filename="word_count.rs"
        language="rust"
        theme={PATRICK_DARK}
        code={RUST_SAMPLE}
      />

import { useState } from "react";
import { Code } from "@/components/ui/code";
import { Button } from "@/components/ui/button";
import { PIERRE } from "@/lib/docs/code-themes";

const SAMPLE = `type BadgeProps = {
  label: string;
  tone?: "neutral" | "positive";
};

export function Badge({ label, tone = "neutral" }: BadgeProps) {
  const count = label.length;
  return (
    <span className={tone === "positive" ? "ok" : "muted"} data-count={count}>
      {label}
    </span>
  );
}`;

export default function CodeAdaptiveTheme() {
  const [useThemeBackground, setUseThemeBackground] = useState(true);

  return (
    <div className="flex w-full max-w-[520px] flex-col gap-3">
      <Button
        size="compact"
        variant="secondary"
        className="self-start"
        onClick={() => setUseThemeBackground((on) => !on)}
      >
        useThemeBackground: {useThemeBackground ? "on" : "off"}
      </Button>
      <Code
        filename="badge.tsx"
        language="tsx"
        adaptiveTheme={PIERRE}
        useThemeBackground={useThemeBackground}
        code={SAMPLE}
      />
    </div>

import { Code } from "@/components/ui/code";

const LONG_SAMPLE = `import { useEffect, useState } from "react";

export function useDebounced<T>(value: T, delay = 200): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

export function useOnline(): boolean {
  const [online, setOnline] = useState(true);

  useEffect(() => {
    const update = () => setOnline(navigator.onLine);
    update();
    window.addEventListener("online", update);
    window.addEventListener("offline", update);
    return () => {
      window.removeEventListener("online", update);
      window.removeEventListener("offline", update);
    };
  }, []);

  return online;
}`;

export default function CodeExpandable() {
  return (
    <div className="w-full max-w-[520px]">
      <Code
        filename="hooks.ts"
        language="typescript"
        code={LONG_SAMPLE}
        expandable

import { Code } from "@/components/ui/code";

const SAMPLE = `import { useEffect, useState } from "react";

export function useTheme() {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    document.body.dataset.theme = theme;
  }, [theme]);

  return { theme, setTheme };
}`;

// A neobrutalist block, three overrides deep. The root: a 2px border and a
// hard 4px offset shadow with no blur — black on the light page, white on the
// dark one, the slab inverting with the page. `border-2` replaces the default
// hairline rather than stacking on it, because the class is merged; the type
// stays at `text-base`. The title bar, through its slot: a flat pastel with a
// hard rule under it (black on both pages) and near-black text. The filename
// and its icon normally sit at 60% of the bar's colour, which greys them over
// a pastel, so that slot is brought to full strength. The gutter, through its
// slot: pulled in.
const OVERRIDES = [
  "rounded-xs border-2 border-neutral-950 text-base shadow-[4px_4px_0_0_#0a0a0a]",
  "dark:border-[#88aaee] dark:shadow-[4px_4px_0_0_#fff]",
  "**:data-[slot=code-header]:border-b-2 **:data-[slot=code-header]:border-neutral-950 **:data-[slot=code-header]:bg-[#88aaee] **:data-[slot=code-header]:text-neutral-950 **:data-[slot=code-header]:py-3",
  "**:data-[slot=code-filename]:opacity-100",
  "**:data-[slot=code-gutter]:w-10 **:data-[slot=code-gutter]:pr-4 **:data-[slot=code-gutter]:pl-2",
].join(" ");

export default function CodeOverrideStyling() {
  return (
    // Room on the right and below for the shadow, which sits outside the box.
    <div className="w-full max-w-[560px] py-2 pr-1 pb-3">
      <Code
        language="typescript"
        filename="use-theme.ts"
        code={SAMPLE}
        className={OVERRIDES}