Animated Code Block

1"use client";
2 
3import {
4  useCallback,
5  useEffect,
6  useLayoutEffect,
7  useMemo,
8  useRef,
9  useState,
10} from "react";
11import { AnimatePresence, motion, useReducedMotion } from "motion/react";
12import {
13  Check,
14  Code2,
15  Copy,
16  Maximize2,
17  Minimize2,
18  Pause,
19  Play,
20  RotateCcw,
21} from "lucide-react";
22import Prism from "prismjs";
23import "prismjs/components/prism-bash";
24import "prismjs/components/prism-css";
25import "prismjs/components/prism-javascript";
26import "prismjs/components/prism-json";
27import "prismjs/components/prism-jsx";
28import "prismjs/components/prism-markdown";
29import "prismjs/components/prism-python";
30import "prismjs/components/prism-scss";
31import "prismjs/components/prism-sql";
32import "prismjs/components/prism-tsx";
33import "prismjs/components/prism-typescript";
34import "prismjs/components/prism-yaml";
35 
36import { cn } from "@/lib/utils";
37 
38export type AnimatedCodeBlockTheme =
39  | "dark"
40  | "terminal"
41  | "minimal"
42  | "nightowl";
43 
44export interface AnimatedCodeBlockProps {
45  code: string;
46  language?: string;
47  theme?: AnimatedCodeBlockTheme;
48  typingSpeed?: number;
49  showLineNumbers?: boolean;
50  highlightLines?: number[];
51  title?: string;
52  className?: string;
53  autoPlay?: boolean;
54  loop?: boolean;
55  showControls?: boolean;
56  onCopy?: () => void;
57}
58 
59interface ThemeStyles {
60  shell: string;
61  header: string;
62  surface: string;
63  border: string;
64  text: string;
65  muted: string;
66  accent: string;
67  accentText: string;
68  accentSoft: string;
69  highlight: string;
70  syntax: string;
71}
72 
73const themes: Record<AnimatedCodeBlockTheme, ThemeStyles> = {
74  dark: {
75    shell: "bg-slate-950 shadow-2xl shadow-black/40",
76    header: "bg-slate-900/90",
77    surface: "bg-slate-950",
78    border: "border-white/10",
79    text: "text-slate-100",
80    muted: "text-slate-500",
81    accent: "bg-violet-500",
82    accentText: "text-violet-300",
83    accentSoft: "bg-violet-400/10 text-violet-200",
84    highlight: "border-violet-400 bg-violet-400/10",
85    syntax:
86      "[&_.token.comment]:text-slate-500 [&_.token.comment]:italic [&_.token.punctuation]:text-slate-400 [&_.token.keyword]:text-violet-300 [&_.token.operator]:text-sky-300 [&_.token.string]:text-emerald-300 [&_.token.number]:text-amber-300 [&_.token.boolean]:text-amber-300 [&_.token.function]:text-blue-300 [&_.token.class-name]:text-cyan-300 [&_.token.tag]:text-rose-300 [&_.token.attr-name]:text-amber-200 [&_.token.property]:text-sky-300",
87  },
88  nightowl: {
89    shell: "bg-slate-950 shadow-2xl shadow-black/40",
90// … truncated