Developer Guide

{
  "collection": {
    "id": "coll123",
    "name": "Team Members",
    "slug": "team-members",
    "description": "Our amazing team",
    "schema": [...]
  },
  "items": [
    {
      "id": "item1",
      "title": "Sarah Chen",
      "slug": "sarah-chen",
      "image": "https://...",
      "description": "CEO & Founder",
      "tags": ["leadership", "founder"],
      "data": { "contentBlocks": [...] },
      "order": 0,
      "updatedAt": "2025-01-15T10:00:00Z"
    }
  ]
}

{
  "id": "item1",
  "title": "Sarah Chen",
  "slug": "sarah-chen",
  "image": "https://...",
  "description": "CEO & Founder",
  "tags": ["leadership", "founder"],
  "contentBlocks": [
    { "id": "b1", "type": "text", "content": "Sarah founded the company in 2020..." },
    { "id": "b2", "type": "heading", "content": "Background", "level": 2 },
    { "id": "b3", "type": "text", "content": "With over 15 years of experience..." },
    { "id": "b4", "type": "image", "url": "https://...", "alt": "Team photo", "size": "large" },
    { "id": "b5", "type": "quote", "content": "Innovation starts with people", "author": "Sarah Chen" },
    { "id": "b6", "type": "divider" }
  ],
  "data": { ... },
  "order": 0,
  "updatedAt": "2025-01-15T10:00:00Z",
  "collection": {
    "id": "coll123",
    "name": "Team Members",
    "slug": "team-members",
    "description": "Our amazing team"
  }
}

// components/CollectionItemDetail.tsx
const sizeWidths = { full: '100%', large: '75%', medium: '50%', small: '25%' };

function renderContentBlock(block) {
  switch (block.type) {
    case 'text':
      return <p key={block.id}>{block.content}</p>;
    case 'heading':
      return block.level === 3
        ? <h3 key={block.id}>{block.content}</h3>
        : <h2 key={block.id}>{block.content}</h2>;
    case 'image':
      return (
        <img
          key={block.id}
          src={block.url}
          alt={block.alt || ''}
          style={{ width: sizeWidths[block.size || 'full'] }}
        />
      );
    case 'quote':
      return (
        <blockquote key={block.id}>
          <p>{block.content}</p>
          {block.author && <cite>— {block.author}</cite>}
        </blockquote>
      );
    case 'divider':
      return <hr key={block.id} />;
    default:
      return null;
  }
}

export default function CollectionItemPage({ projectId, collectionName, itemSlug }) {
  const [item, setItem] = useState(null);

  useEffect(() => {
    fetch(`/api/public/project/${projectId}/collections/${collectionName}/${itemSlug}?apiKey=YOUR_API_KEY`)
      .then(res => res.json())
      .then(data => setItem(data));
  }, [projectId, collectionName, itemSlug]);

  if (!item) return <div>Loading...</div>;

  return (
    <article>
      <h1>{item.title}</h1>
      {item.image && <img src={item.image} alt={item.title} />}
      <p className="subtitle">{item.description}</p>
      <div className="content">
        {item.contentBlocks?.map(block => renderContentBlock(block))}
      </div>
    </article>
  );
}