Code Block

"use client";
import { useEffect, useState } from "react";
import { Copy, Check } from "lucide-react";
import { cn } from "@/lib/utils";

type State = "single" | "tabs" | "diff";

const FILES = [
{ name: "page.tsx", code: `export default function Page() {
  return <h1>Hello</h1>
}` },
{ name: "layout.tsx", code: `export default function Layout({ children }) {
  return <div>{children}</div>
}` },
];

const DIFF = [
{ type: "ctx", line: `export default function Page() {` },
{ type: "del", line: `  return <h1>Hello</h1>` },
{ type: "add", line: `  return <h1>Hello, Lab</h1>` },
{ type: "add", line: `  // version 2` },
{ type: "ctx", line: `}` },
];

export function Codeblock({ state = "single" }: { state?: State }) {
const [active, setActive] = useState(0);
const [copied, setCopied] = useState(false);
useEffect(() => setActive(0), [state]);

return (
  <div className="w-full max-w-md overflow-hidden rounded-lg border border-border bg-[#0a0a0a] font-mono text-xs">
    <div className="flex items-center justify-between border-b border-border/60 bg-background/30 px-3 py-1.5">
      {state === "tabs" ? (
        <div className="flex gap-1">
          {FILES.map((f, i) => (
            <button
              key={f.name}
              onClick={() => setActive(i)}
              className={cn(
                "rounded-t px-2.5 py-1 text-[11px]",
                i === active
                  ? "bg-background text-foreground"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              {f.name}
            </button>
          ))}
        </div>
      ) : (
        <span className="text-[11px] text-muted-foreground">
          {state === "diff" ? "page.tsx (diff)" : "page.tsx"}
        </span>
      )}
      <button
        onClick={() => {
          setCopied(true);
          setTimeout(() => setCopied(false), 1200);
        }}
        className="text-muted-foreground hover:text-foreground"
      >
        {copied ? <Check className="h-3 w-3 text-emerald-500" /> : <Copy className="h-3 w-3" />}
      </button>
    </div>
    <pre className="overflow-x-auto p-3 leading-relaxed">
      {state === "diff" ? (
        DIFF.map((l, i) => (
          <div
            key={i}
            className={cn(
              "px-1",
              l.type === "add" && "bg-emerald-500/10 text-emerald-400",
              l.type === "del" && "bg-red-500/10 text-red-400",
              l.type === "ctx" && "text-muted-foreground",
            )}
          >
            <span className="select-none opacity-60">
              {l.type === "add" ? "+ " : l.type === "del" ? "- " : "  "}
            </span>
            {l.line}
          </div>
        ))
      ) : (
        <code>{FILES[active].code}</code>
      )}
    </pre>
  </div>
);
}