ThinkRoman Media Library

import { createClient } from 'next-sanity'

const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  apiVersion: process.env.NEXT_PUBLIC_SANITY_API_VERSION,
  useCdn: true
})

// Fetch all campaigns with their media
const fetchCampaigns = async () => {
  return await client.fetch(`
    *[_type == "campaign"] {
      name,
      description,
      "images": images[] {
        "url": asset->url,
        "metadata": asset->metadata
      },
      "videos": videos[] {
        "url": asset->url,
        "metadata": asset->metadata
      }
    }
  `)
}

// Example usage in your component:
const YourComponent = async () => {
  const campaigns = await fetchCampaigns()
  return campaigns.map(campaign => (
    <div key={campaign.name}>
      <h2>{campaign.name}</h2>
      {campaign.images?.map(img => (
        <img src={img.url} alt={campaign.name} />
      ))}
    </div>
  ))
}