Blog Grid

// Query for blog posts
const query = `
  *[_type == "blogPost"] | order(publishedAt desc) {
    _id,
    title,
    slug,
    publishedAt,
    excerpt,
    mainImage,
    tags
  }
`

interface BlogPost {
  _id: string
  title: string
  slug: { current: string }
  publishedAt: string
  excerpt?: string
  mainImage?: SanityImage
  tags?: string[]
}

import { CategoryFilters } from '@/components/ui/CategoryFilters'

// Gets unique categories from posts
<CategoryFilters
  categories={['All', 'Design', 'Development', 'Strategy']}
  activeCategory={activeCategory}
  onCategoryChange={setActiveCategory}
/>

import { BlogGrid } from '@/components/sections/BlogGrid'
import { CategoryFilters } from '@/components/ui/CategoryFilters'

export default async function BlogPage() {
  const posts = await getBlogPosts()
  return (
    <main>
      <CategoryFilters {...filterProps} />
      <BlogGrid posts={posts} />
    </main>
  )
}

// With custom options
<BlogGrid
  posts={posts}
  showViewAll={true}
  maxCols={2}
  title="Related Articles"
/>

import { BlogGrid } from '@/components/sections/BlogGrid'
import { FeaturedBlogCard } from '@/components/sections/FeaturedBlogCard'
import { CategoryFilters } from '@/components/ui/CategoryFilters'