code-block-compare-demo

1import { CodeCompare } from "@/registry/default/ui/code-block";
2 
3const beforeCode = `function add(a, b) {
4  return a + b;
5}`;
6 
7const afterCode = `function add(a: number, b: number): number {
8  return a + b;
9}`;
10 
11export default function CodeBlockCompareDemo() {
12  return (
13    <div className="w-full max-w-4xl">
14      <CodeCompare
15        before={beforeCode}
16        after={afterCode}
17        language="typescript"
18        beforeTitle="JavaScript"
19        afterTitle="TypeScript"
20        showDiff={true}
21      />
22    </div>
23  );
24}