Build a News/Media Website

import { Article } from "publive-cms-sdk";

interface ArticlePageProps {
  article: Article;
}

export default function ArticlePage({ article }: ArticlePageProps) {
  return (
    <article className="max-w-4xl mx-auto">
      {/* Hero Image */}
      {article.hero_image && (
        <img 
          src={article.hero_image.url} 
          alt={article.hero_image.alt_text}
          className="w-full h-auto"
        />
      )}

      {/* Article Metadata */}
      <header className="py-8">
        <h1 className="text-4xl font-bold mb-4">
          {article.headline}
        </h1>
        
        <div className="flex items-center gap-4 text-gray-600">
          <span>{article.author.name}</span>
          <span>•</span>
          <time>{new Date(article.published_at).toLocaleDateString()}</time>
        </div>
      </header>

      {/* Article Content */}
      <div 
        className="prose prose-lg max-w-none"
        dangerouslySetInnerHTML={{ __html: article.content }}
      />

      {/* Related Articles */}
      {article.related_stories && (
        <section className="mt-12">
          <h2 className="text-2xl font-bold mb-6">Related Stories</h2>
          {/* Related articles rendering */}
        </section>
      )}
    </article>
  );
}