Releases & Changelog

import { useState, useEffect } from 'react';

interface Release {
  id: string;
  title: string;
  content: string;
  publishedAt: number;
}

export function useReleases(workspaceSlug: string) {
  const [releases, setReleases] = useState<Release[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch(`https://simpleproduct.dev/api/v1/releases/public?workspace=${workspaceSlug}`)
      .then(res => res.json())
      .then(data => {
        setReleases(data.data || []);
        setIsLoading(false);
      });
  }, [workspaceSlug]);

  return { releases, isLoading };
}

// Changelog component
export function Changelog({ workspaceSlug }: { workspaceSlug: string }) {
  const { releases, isLoading } = useReleases(workspaceSlug);

  if (isLoading) return <p>Loading...</p>;

  return (
    <div>
      <h2>What's New</h2>
      {releases.map(release => (
        <article key={release.id}>
          <h3>{release.title}</h3>
          <time>{new Date(release.publishedAt).toLocaleDateString()}</time>
          <div dangerouslySetInnerHTML={{ __html: release.content }} />
        </article>
      ))}
    </div>
  );
}