Blog

// app/stories/page.tsx
import { fetchBlogPosts } from "@pandaidx/widgets/server"
import { StoriesView } from "@/components/stories-view"

export default async function StoriesPage({ searchParams }: { searchParams: Promise<{ page?: string }> }) {
  const { page } = await searchParams
  const data = await fetchBlogPosts({ publicKey: process.env.NEXT_PUBLIC_PANDA_PUBLIC_KEY!, apiUrl: process.env.NEXT_PUBLIC_PANDA_API_URL, page: Number(page) || 1, pageSize: 9 })
  return <StoriesView data={data} />
}

// components/stories-view.tsx
"use client"
import Image from "next/image"
import Link from "next/link"
import { useBlogList, type WidgetBlogPage } from "@pandaidx/widgets/client"

export const StoriesView = ({ data }: { data: WidgetBlogPage }) => {
  const blog = useBlogList({ data })
  if (blog.empty) return <p>No stories yet.</p>
  return (
    <section className="mx-auto max-w-6xl px-4 py-16">
      <nav className="mb-8 flex flex-wrap gap-2">
        <Link href={blog.indexHref}>All</Link>
        {blog.categories.map((category) => <Link key={category.slug} href={category.href}>{category.label}</Link>)}
      </nav>
      <div className="grid gap-8 md:grid-cols-3">
        {blog.stories.map((story) => (
          <article key={story.slug}>
            <Link href={story.href}>
              {story.image ? <Image src={story.image} alt="" width={640} height={400} sizes="(min-width: 768px) 33vw, 100vw" className="aspect-[16/10] w-full object-cover" /> : null}
              <h2 className="mt-4 text-xl">{story.title}</h2>
            </Link>
            <p className="text-sm opacity-70">{story.dateLabel}{story.readMinutes ? ` · ${story.readMinutes} min read` : ""}</p>
          </article>
        ))}
      </div>
      <div className="mt-10 flex justify-between">
        {blog.prevHref ? <Link href={blog.prevHref}>Previous</Link> : <span />}
        {blog.nextHref ? <Link href={blog.nextHref}>Next</Link> : null}
      </div>
    </section>
  )
}

// app/story/[slug]/page.tsx
import { notFound } from "next/navigation"
import { fetchBlogPost } from "@pandaidx/widgets/server"
import { StoryView } from "@/components/story-view"

export default async function StoryPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const article = await fetchBlogPost({ publicKey: process.env.NEXT_PUBLIC_PANDA_PUBLIC_KEY!, apiUrl: process.env.NEXT_PUBLIC_PANDA_API_URL, slug })
  if (!article) notFound()
  return <StoryView article={article} />
}

// components/story-view.tsx
"use client"
import Image from "next/image"
import Link from "next/link"
import { BlogArticleBody, ShareButton, useBlogArticle, type WidgetBlogArticle } from "@pandaidx/widgets/client"

export const StoryView = ({ article }: { article: WidgetBlogArticle }) => {
  const { story, next, indexHref } = useBlogArticle({ article })
  return (
    <main className="mx-auto max-w-3xl px-4 py-16">
      <Link href={indexHref} className="text-sm underline">All stories</Link>
      <h1 className="mt-4 text-4xl">{story.title}</h1>
      <p className="mt-2 text-sm opacity-70">{story.author?.name} · {story.dateLabel}{story.readMinutes ? ` · ${story.readMinutes} min read` : ""}</p>
      {story.image ? <Image src={story.image} alt="" width={1200} height={675} sizes="(min-width: 768px) 768px, 100vw" priority className="mt-8 w-full object-cover" /> : null}
      <BlogArticleBody article={article} className="mt-8" />
      {next ? <Link href={next.href} className="mt-12 block border-t pt-6">Next: {next.title}</Link> : null}
    </main>
  )
}