Changelog

"use client";
 
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Sparkles, Bug, Zap, Plus, ChevronDown } from "lucide-react";
 
interface ChangelogEntry {
  id: string;
  version: string;
  date: string;
  title: string;
  description?: string;
  changes: {
    type: "feature" | "improvement" | "bugfix" | "breaking";
    title: string;
    description?: string;
  }[];
}
 
interface ChangelogProps {
  title?: string;
  description?: string;
  entries: ChangelogEntry[];
  className?: string;
}
 
export function Changelog({
  title = "Changelog",
  description = "Stay up to date with the latest features and improvements",
  entries,
  className = "",
}: ChangelogProps) {
  const [expandedEntries, setExpandedEntries] = useState<Set<string>>(
    new Set([entries[0]?.id]),
  );
 
  const toggleEntry = (id: string) => {
    const newExpanded = new Set(expandedEntries);
    if (newExpanded.has(id)) {
      newExpanded.delete(id);
    } else {
      newExpanded.add(id);
    }
    setExpandedEntries(newExpanded);
  };
 
  const getChangeTypeConfig = (type: ChangelogEntry["changes"][0]["type"]) => {
    switch (type) {
      case "feature":
        return {
          label: "New",
          color: "text-blue-600 dark:text-blue-400",
          bg: "bg-blue-50 dark:bg-blue-950/30",
          icon: Plus,
        };
      case "improvement":
        return {
          label: "Improved",
          color: "text-emerald-600 dark:text-emerald-400",
          bg: "bg-emerald-50 dark:bg-emerald-950/30",
          icon: Zap,
        };
      case "bugfix":
        return {
          label: "Fixed",
          color: "text-amber-600 dark:text-amber-400",
          bg: "bg-amber-50 dark:bg-amber-950/30",
          icon: Bug,
        };
      case "breaking":
        return {
          label: "Breaking",
          color: "text-red-600 dark:text-red-400",
          bg: "bg-red-50 dark:bg-red-950/30",
          icon: Sparkles,
        };
    }
  };
 
  return (
    <section className={`w-full py-24 ${className}`}>
      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, ease: "easeOut" }}
          className="mb-16 text-center"
        >
          <h2 className="mb-4 text-4xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-5xl">
            {title}
          </h2>
          <p className="mx-auto max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">
            {description}
          </p>
        </motion.div>
        <div className="space-y-6">
          {entries.map((entry, index) => {
            const isExpanded = expandedEntries.has(entry.id);
            const isLatest = index === 0;
 
            return (
              <motion.div
                key={entry.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{
                  duration: 0.5,
                  delay: index * 0.1,
                  ease: "easeOut",
                }}
              >
                <div
                  className={`overflow-hidden rounded-2xl border bg-white shadow-sm transition-all duration-300 dark:bg-zinc-900 ${
                    isLatest
                      ? "border-blue-200 ring-2 ring-blue-100 dark:border-blue-800 dark:ring-blue-950/50"
                      : "border-zinc-200 dark:border-zinc-800"
                  }`}
                >
                  <button
                    onClick={() => toggleEntry(entry.id)}
                    className="flex w-full items-center justify-between p-6 text-left transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50"
                  >
                    <div className="flex-1">
                      <div className="mb-2 flex items-center gap-3">
                        <span className="inline-flex items-center gap-1.5 rounded-full bg-zinc-100 px-3 py-1 text-sm font-semibold text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
                          v{entry.version}
                        </span>
                        {isLatest && (
                          <span className="inline-flex items-center gap-1.5 rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-600 dark:bg-blue-950/30 dark:text-blue-400">
                            <Sparkles className="h-3 w-3" />
                            Latest
                          </span>
                        )}
                        <span className="text-sm text-zinc-500 dark:text-zinc-400">
                          {entry.date}
                        </span>
                      </div>
                      <h3 className="text-xl font-bold text-zinc-900 dark:text-white">
                        {entry.title}
                      </h3>
                      {entry.description && (
                        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
                          {entry.description}
                        </p>
                      )}
                    </div>
                    <motion.div
                      animate={{ rotate: isExpanded ? 180 : 0 }}
                      transition={{ duration: 0.2 }}
                      className="ml-4"
                    >
                      <ChevronDown className="h-5 w-5 text-zinc-400" />
                    </motion.div>
                  </button>
 
                  <AnimatePresence initial={false}>
                    {isExpanded && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: "auto", opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.3, ease: "easeOut" }}
                        className="overflow-hidden"
                      >
                        <div className="border-t border-zinc-100 bg-zinc-50/50 p-6 dark:border-zinc-800 dark:bg-zinc-900/50">
                          <div className="space-y-4">
                            {entry.changes.map((change, idx) => {
                              const config = getChangeTypeConfig(change.type);
                              const Icon = config.icon;
 
                              return (
                                <motion.div
                                  key={idx}
                                  initial={{ opacity: 0, x: -10 }}
                                  animate={{ opacity: 1, x: 0 }}
                                  transition={{
                                    delay: idx * 0.05,
                                    duration: 0.3,
                                    ease: "easeOut",
                                  }}
                                  className="flex gap-3"
                                >
                                  <div
                                    className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg ${config.bg}`}
                                  >
                                    <Icon
                                      className={`h-4 w-4 ${config.color}`}
                                    />
                                  </div>
                                  <div className="flex-1">
                                    <div className="mb-1 flex items-center gap-2">
                                      <span
                                        className={`text-xs font-semibold ${config.color}`}
                                      >
                                        {config.label}
                                      </span>
                                      <span className="font-medium text-zinc-900 dark:text-white">
                                        {change.title}
                                      </span>
                                    </div>
                                    {change.description && (
                                      <p className="text-sm text-zinc-600 dark:text-zinc-400">
                                        {change.description}
                                      </p>
                                    )}
                                  </div>
                                </motion.div>
                              );
                            })}
                          </div>
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              </motion.div>
            );
          })}
        </div>
 
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
          className="mt-12 text-center"
        >
          <a
            href="#"
            className="inline-flex items-center gap-2 text-sm font-semibold text-blue-600 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
          >
            View full changelog
            <ChevronDown className="h-4 w-4 -rotate-90" />
          </a>
        </motion.div>
      </div>
    </section>
  );
}