Animated Code Block Demo

1"use client";
2 
3import { useState } from "react";
4 
5import {
6  AnimatedCodeBlock,
7  type AnimatedCodeBlockTheme,
8} from "../ui/animated-code-block";
9 
10const exampleCode = `import { motion } from "motion/react";
11 
12interface FeatureCardProps {
13  title: string;
14  description: string;
15}
16 
17export function FeatureCard({
18  title,
19  description,
20}: FeatureCardProps) {
21  return (
22    <motion.article
23      initial={{ opacity: 0, y: 12 }}
24      animate={{ opacity: 1, y: 0 }}
25      whileHover={{ y: -4 }}
26      className="rounded-2xl border p-6"
27    >
28      <h3>{title}</h3>
29      <p>{description}</p>
30    </motion.article>
31  );
32}`;
33 
34const themes: Array<{
35  value: AnimatedCodeBlockTheme;
36  label: string;
37}> = [
38  { value: "dark", label: "Midnight" },
39  { value: "nightowl", label: "Night Owl" },
40  { value: "terminal", label: "Terminal" },
41  { value: "minimal", label: "Minimalist" },
42];
43 
44export function AnimatedCodeBlockDemo(): React.JSX.Element {
45  const [theme, setTheme] = useState<AnimatedCodeBlockTheme>("dark");
46 
47  return (
48    <div className="mx-auto flex w-full max-w-4xl flex-col gap-4">
49      <div className="flex flex-wrap items-center justify-between gap-3 px-1">
50        <div className="flex flex-wrap gap-1 rounded-xl border border-border bg-muted/40 p-1">
51          {themes.map((item) => {
52            const isActive = item.value === theme;
53            return (
54              <button
55                key={item.value}
56                type="button"
57                onClick={() => setTheme(item.value)}
58                className={
59                  isActive
60                    ? "flex items-center gap-1.5 rounded-lg bg-background px-3 py-2 text-xs font-medium text-foreground shadow-sm"
61                    : "flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
62                }
63                aria-pressed={isActive}
64              >
65                <span className="hidden sm:inline">{item.label}</span>
66              </button>
67            );
68          })}
69        </div>
70      </div>
71 
72      <AnimatedCodeBlock
73        key={theme}
74        code={exampleCode}
75        theme={theme}
76        title="feature-card.tsx"
77        typingSpeed={10}
78        showLineNumbers
79        autoPlay
80        language="tsx"
81        highlightLines={[12, 13, 14]}
82      />
83    </div>
84  );
85}
86 
87export function AnimatedCodeBlockMinimalDemo(): React.JSX.Element {
88  return (
89    <div className="mx-auto w-full max-w-2xl">
90// … truncated