🧩 Component Library

// 1. Import the component
import IndicatorsGrid from '@components/infographic/IndicatorsGrid.astro';

// 2. Use with default indicators
<IndicatorsGrid />

// 1. Define your indicators data
const customIndicators = [
  {
    severity: 'critical',  // 'critical' | 'severe' | 'opportunity'
    title: 'Water Scarcity',
    value: '2.2B',
    description: 'people without access',
    source: 'UN Water, 2023'
  },
  // ... more indicators
];

// 2. Pass data to the component
<IndicatorsGrid indicators={customIndicators} />

// 1. Import the component
import IndicatorCard from '@components/infographic/IndicatorCard.astro';

// 2. Use with required props
<IndicatorCard
  severity="critical"  // 'critical' | 'severe' | 'opportunity'
  title="Water Scarcity"
  value="2.2B"
  description="People affected globally"
  source="UN Water, 2023"
  class="custom-class"  // Optional: Add custom classes
/>

// 1. Import the component
import FactCard from '@components/facts/FactCard.astro';
import FactCardWithImage from '@components/facts/FactCard--w-Image.astro';

// 2. Use with a content collection entry
<FactCard entry={entry} />

// 3. Or with the image variant
<FactCardWithImage entry={entry} />

// 1. In your content/config.ts
export const collections = {
  facts: defineCollection({
    type: 'data',
    schema: z.object({
      title: z.string(),
      index: z.number(),
      zinger: z.string().optional(),
      source_org: z.string().optional(),
      source_title: z.string().optional().nullable(),
      source_url: z.string().url().optional().nullable(),
      companion_image_url: z.string().optional(),
      sources: z.array(
        z.object({
          org: z.string(),
          title: z.string().optional().nullable(),
          url: z.string().url().optional().nullable(),
        })
      ).optional(),
    }),
  }),
  // ... other collections
};

// 2. In your page component
const entries = await getCollection('facts');

// 3. Render the cards
{entries.map(entry => (
  <FactCard entry={entry} class="mb-4" />
))}