pnpm create vite@latest dtpr-demo -- --template vue-ts
cd dtpr-demo
pnpm add @dtpr/ui

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  DtprDatachain,
  DtprElementDetail,
  DtprElementGrid,
} from '@dtpr/ui/vue'
import '@dtpr/ui/vue/styles.css'
import { deriveElementDisplay, groupElementsByCategory } from '@dtpr/ui/core'
import type { Element, Category } from '@dtpr/ui/vue'

const BASE = 'https://api.dtpr.io/api/v2'
const VERSION = 'ai@2026-04-16-beta'

const categories = ref<Category[]>([])
const byCategory = ref<Record<string, Element[]>>({})
const ready = ref(false)

onMounted(async () => {
  const [catsRes, elsRes] = await Promise.all([
    fetch(`${BASE}/schemas/${VERSION}/categories`).then((r) => r.json()),
    fetch(`${BASE}/schemas/${VERSION}/elements?fields=all&limit=200`).then((r) => r.json()),
  ])
  categories.value = catsRes.categories
  byCategory.value = groupElementsByCategory(elsRes.elements)
  ready.value = true
})
</script>

<template>
  <main v-if="ready">
    <DtprDatachain :sections="categories.map((c) => ({ id: c.id, title: c.name[0]?.value ?? c.id }))">
      <template
        v-for="c in categories"
        :key="c.id"
        #[`section-${c.id}`]
      >
        <DtprElementGrid>
          <DtprElementDetail
            v-for="el in byCategory[c.id] ?? []"
            :key="el.id"
            :display="deriveElementDisplay(el, undefined, 'en')"
          />
        </DtprElementGrid>
      </template>
    </DtprDatachain>
  </main>
</template>

pnpm dev