Pluck String: Changelog

import * as React from "react";

import { PluckString } from "@/components/ui/pluck-string";

const releases = [
  {
    version: "2.4.0",
    date: "Oct 2",
    title: "Springs, everywhere",
    body: "Every transition now runs on a spring, so interrupting one never snaps.",
  },
  {
    version: "2.3.1",
    date: "Sep 18",
    title: "Quieter dark mode",
    body: "Borders and dividers sit a step lower, so content leads.",
  },
  {
    version: "2.3.0",
    date: "Sep 4",
    title: "Reduced motion, by default",
    body: "Movement drops out for people who ask for less. Feedback stays.",
  },
];

export function PluckStringChangelogDemo() {
  return (
    <div className="w-full max-w-xl">
      <p className="font-mono text-xs uppercase tracking-widest text-zinc-500">Changelog</p>
      <div className="mt-4">
        {releases.map((release, index) => (
          <React.Fragment key={release.version}>
            {index > 0 ? (
              <PluckString
                fade
                pull={16}
                className="h-12 text-zinc-200 dark:text-zinc-800"
                highlightClassName="text-zinc-500 dark:text-zinc-400"
              />
            ) : null}
            <article className="grid gap-1 sm:grid-cols-[7rem_1fr] sm:gap-6">
              <div className="flex gap-3 font-mono text-xs text-zinc-500 sm:flex-col sm:gap-1 sm:pt-1">
                <span className="text-zinc-900 dark:text-zinc-100">v{release.version}</span>
                <span>{release.date}</span>
              </div>
              <div>
                <h4 className="font-medium text-zinc-900 dark:text-zinc-50">{release.title}</h4>
                <p className="mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
                  {release.body}
                </p>
              </div>
            </article>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}