Animated Code List

export default function AnimatedCodeListExample() {
  const codeLines = [
    "function processData(data) {",
    "  const results = [];",
    "  for (let i = 0; i < data.length; i++) {",
    "    const item = data[i];",
    "    if (item.isValid) {",
    "      results.push(item.process());",
    "    }",
    "  }",
    "  return results;",
    "}",
    "",
    "// Example usage",
    "const data = [",
    "  { id: 1, isValid: true, process: () => 'processed' },",
    "  { id: 2, isValid: false, process: () => 'skipped' },",
    "  { id: 3, isValid: true, process: () => 'processed' },",
    "];",
    "",
    "const result = processData(data);",
    "console.log(result); // ['processed', 'processed']",
  ];

  return (
    <AnimatedCodeList
      title="Generating code for your application..."
      codeLines={codeLines}
      animationSpeed="normal"
      scrollDirection="up"
      scrollDuration={25000} // Custom 25 second duration
      scrollCadence="stepped"
      pauseDuration={1500}
      skeletonDuration={2000}
      lineRevealDelay={150}
      containerHeight={288}
      startLineNumber={1}
      className="w-full max-w-lg"
    />
  );
}

interface AnimatedCodeListProps {
  title?: string;
  codeLines?: string[];
  className?: string;
  scrollDirection?: "up" | "down";
  animationSpeed?: "slow" | "normal" | "fast";
  scrollDuration?: number;
  scrollCadence?: "smooth" | "stepped";
  pauseDuration?: number;
  skeletonDuration?: number;
  lineRevealDelay?: number;
  containerHeight?: number;
  startLineNumber?: number;
}