india-vs-australia-match-report

// app/news/[slug]/page.tsx
import { client } from '@/lib/sanity'
import { urlFor } from '@/lib/sanity'
import { Post } from '@/types/sanity'
import Image from 'next/image'
import { PortableText } from '@portabletext/react'
import { notFound } from 'next/navigation'
import Link from 'next/link'

interface Props {
params: { slug: string }
}

async function getPost(slug: string): Promise<Post | null> {
const query = `*[_type == "post" && slug.current == $slug][0]{
title,
publishedAt,
mainImage,
body,
"author": coalesce(author->name, author),
categories,
excerpt
}`
return await client.fetch(query, { slug }) // ✅ params passed correctly
}

export default async function PostPage({ params }: Props) {
const post = await getPost(params.slug)

if (!post) {
notFound()
}

const formattedDate = new Date(post.publishedAt).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
})

return (
<main className="bg-[#f8fafc] min-h-screen">
{/* Hero Section */}
<div className="relative h-[40vh] md:h-[50vh] lg:h-[60vh] w-full bg-gray-900">
{post.mainImage ? (
<Image
src={urlFor(post.mainImage).width(1600).height(900).url()}
alt={post.title}
fill
className="object-cover opacity-90"
priority
/>
) : (
<div className="w-full h-full bg-gradient-to-r from-[#008ddf] to-blue-800" />
)}
<div className="absolute inset-0 bg-black/40" />
<div className="absolute bottom-0 left-0 right-0 p-6 md:p-12 bg-gradient-to-t from-black/80 to-transparent">
<div className="max-w-4xl mx-auto">
<div className="flex items-center gap-2 text-sm text-white/80 mb-3">
<Link href="/" className="hover:text-white transition">Home</Link>
<span>›</span>
<Link href="/news" className="hover:text-white transition">News</Link>
<span>›</span>
<span className="text-white">{post.categories?.[0] || 'Article'}</span>
</div>
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
{post.title}
</h1>
<div className="flex items-center gap-4 mt-4 text-white/80">
<span className="font-medium">By {post.author}</span>
<span className="w-1 h-1 bg-white/60 rounded-full" />
<span>{formattedDate}</span>
</div>
</div>
</div>
</div>

{/* Article Content */}
<article className="max-w-3xl mx-auto px-4 py-12 md:py-16">
{post.excerpt && (
<div className="text-xl text-gray-700 border-l-4 border-[#008ddf] pl-6 mb-8 italic">
{post.excerpt}
</div>
)}

<div className="prose prose-lg prose-headings:font-bold prose-a:text-[#008ddf] max-w-none">
<PortableText value={post.body} />
</div>

{post.categories && post.categories.length > 0 && (
<div className="mt-12 pt-6 border-t border-gray-200">
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Topics</h3>
<div className="flex flex-wrap gap-2">
{post.categories.map((cat) => (
<span
key={cat}
className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium"
>
{cat.replace('-', ' ')}
</span>
))}
</div>
</div>
)}
</article>

<div className="max-w-3xl mx-auto px-4 pb-12">
<Link
href="/news"
className="inline-flex items-center text-[#008ddf] hover:text-[#0066a0] font-medium group"
>
<svg
className="w-5 h-5 mr-2 transform group-hover:-translate-x-1 transition"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
</svg>
Back to all news
</Link>
</div>
</main>
)
}

sasasasasas