Code Diff Wipe

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6const DEFAULT_BEFORE = `function getUser(id) {
7  return fetch('/api/user/' + id)
8    .then(function (res) {
9      return res.json();
10    })
11    .then(function (data) {
12      if (data.error) {
13        throw new Error(data.error);
14      }
15      return data.user;
16    });
17}`;
18 
19const DEFAULT_AFTER = `async function getUser(id: string) {
20  const res = await fetch(\`/api/user/\${id}\`);
21  const { user, error } = await res.json();
22  if (error) throw new Error(error);
23  return user;
24}`;
25 
26export interface CodeDiffWipeProps {
27  before?: string;
28  after?: string;
29  language?: string;
30  background?: string;
31  accent?: string;
32  transitionStart?: number;
33  transitionDuration?: number;
34  showHandle?: boolean;
35  speed?: number;
36  fps?: number;
37  durationInFrames?: number;
38  width?: number;
39  height?: number;
40  className?: string;
41}
42 
43const CodePane = ({
44  code,
45  background,
46  label,
47  labelColor,
48  language,
49  dimmed,
50}: {
51  code: string;
52  background: string;
53  label: string;
54  labelColor: string;
55  language: string;
56  dimmed?: boolean;
57}) => {
58  const lines = code.split("\n");
59  return (
60    <div
61      style={{
62        background,
63        display: "flex",
64        flexDirection: "column",
65        inset: 0,
66        position: "absolute",
67      }}
68    >
69      {/* Header */}
70      <div
71        style={{
72          alignItems: "center",
73          background: "rgba(255,255,255,0.02)",
74          borderBottom: "1px solid rgba(255,255,255,0.06)",
75          display: "flex",
76          height: 44,
77          justifyContent: "space-between",
78          padding: "0 18px",
79        }}
80      >
81        <div
82          style={{
83            color: "#71717a",
84            fontFamily:
85              "var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace",
86            fontSize: 13,
87          }}
88        >
89          {language}
90        </div>
91        <div
92          style={{
93            background: `${labelColor}1a`,
94            border: `1px solid ${labelColor}55`,
95            borderRadius: 999,
96            color: labelColor,
97            fontSize: 11,
98            fontWeight: 700,
99            letterSpacing: "0.12em",
100            padding: "4px 10px",
101          }}
102        >
103          {label}
104        </div>
105      </div>
106 
107      {/* Code */}
108      <pre
109        style={{
110          color: dimmed ? "#71717a" : "#e4e4e7",
111          flex: 1,
112          fontFamily:
113// … truncated