Changelog

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface ChangelogEntry {
7  date: string;
8  description?: string;
9  title: string;
10  type?: "feature" | "fix" | "improvement" | "breaking";
11  version: string;
12}
13 
14interface ChangelogProps extends React.HTMLAttributes<HTMLDivElement> {
15  entries: ChangelogEntry[];
16  label?: string;
17}
18 
19const typeConfig: Record<
20  string,
21  { label: string; color: string; glow: string }
22> = {
23  breaking: {
24    color: "bg-red-500/80 text-white",
25    glow: "shadow-[0_0_6px_rgba(239,68,68,0.4)]",
26    label: "BRK",
27  },
28  feature: {
29    color: "bg-primary text-primary-foreground",
30    glow: "shadow-[0_0_6px_var(--primary)]",
31    label: "NEW",
32  },
33  fix: {
34    color: "bg-green-500/80 text-white",
35    glow: "shadow-[0_0_6px_rgba(34,197,94,0.4)]",
36    label: "FIX",
37  },
38  improvement: {
39    color: "bg-amber-500/80 text-white",
40    glow: "shadow-[0_0_6px_rgba(245,158,11,0.4)]",
41    label: "UPD",
42  },
43};
44 
45export function Changelog({
46  entries,
47  label,
48  className,
49  ...props
50}: ChangelogProps) {
51  // Stagger reveal
52  const [revealedIdx, setRevealedIdx] = React.useState(-1);
53  React.useEffect(() => {
54    let idx = 0;
55    const interval = setInterval(() => {
56      setRevealedIdx(idx);
57      idx++;
58      if (idx >= entries.length) {
59        clearInterval(interval);
60      }
61    }, 120);
62    return () => clearInterval(interval);
63  }, [entries.length]);
64 
65  return (
66    <div
67      data-slot="tron-changelog"
68      className={cn(
69        "relative overflow-hidden rounded border border-primary/30 bg-card/80 p-5 backdrop-blur-sm",
70        className
71      )}
72      {...props}
73    >
74      {/* Scanline overlay */}
75      <div className="pointer-events-none absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.03)_2px,rgba(0,0,0,0.03)_4px)]" />
76 
77      {label ? (
78        <div className="mb-4 text-[10px] text-foreground/50 uppercase tracking-widest">
79          {label}
80        </div>
81      ) : null}
82 
83      <div className="relative space-y-0">
84        {entries.map((entry, i) => {
85          const config = typeConfig[entry.type || "feature"];
86          return (
87            <div
88              key={i}
89              className={cn(
90                "relative flex gap-4 pb-6 transition-all duration-400",
91                i <= revealedIdx
92                  ? "translate-y-0 opacity-100"
93                  : "translate-y-2 opacity-0"
94              )}
95            >
96// … truncated