98 lines
4.1 KiB
TypeScript
98 lines
4.1 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { motion } from 'framer-motion';
|
||
import { marketplaceApi, type MarketplaceListResponse } from '../api/marketplace.js';
|
||
import { lessonsApi } from '../api/lessons.js';
|
||
import { ApiClientError } from '../api/client.js';
|
||
|
||
export function MarketplacePage() {
|
||
const [data, setData] = useState<MarketplaceListResponse>({ rows: [], total: 0 });
|
||
const [q, setQ] = useState('');
|
||
const [curatedOnly, setCuratedOnly] = useState(false);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const navigate = useNavigate();
|
||
|
||
async function refresh() {
|
||
setBusy(true); setError(null);
|
||
try {
|
||
const r = await marketplaceApi.list({ q: q.trim() || undefined, curated: curatedOnly ? true : undefined });
|
||
setData(r);
|
||
} catch (e) {
|
||
setError(e instanceof ApiClientError ? e.message : 'Kon marketplace niet laden.');
|
||
} finally { setBusy(false); }
|
||
}
|
||
|
||
useEffect(() => { refresh(); }, [curatedOnly]);
|
||
|
||
async function subscribe(id: number) {
|
||
try { await lessonsApi.subscribe(id); await refresh(); }
|
||
catch (e) { alert(e instanceof ApiClientError ? e.message : 'Abonneren mislukt'); }
|
||
}
|
||
|
||
async function fork(id: number) {
|
||
try {
|
||
const f = await lessonsApi.fork(id);
|
||
navigate(`/lessons/${f.id}`);
|
||
}
|
||
catch (e) { alert(e instanceof ApiClientError ? e.message : 'Forken mislukt'); }
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<header>
|
||
<h1 className="font-display text-3xl font-bold">Marketplace 🛍️</h1>
|
||
<p className="text-sm text-slate-500">Vind trainingen van andere gebruikers en officiële beheerderscontent.</p>
|
||
</header>
|
||
|
||
<div className="surface flex flex-col gap-2 p-4 sm:flex-row">
|
||
<input
|
||
className="input-field flex-1"
|
||
placeholder="Zoek op naam of beschrijving…"
|
||
value={q}
|
||
onChange={(e) => setQ(e.target.value)}
|
||
onKeyDown={(e) => e.key === 'Enter' && refresh()}
|
||
/>
|
||
<label className="flex items-center gap-2 text-sm">
|
||
<input type="checkbox" className="h-4 w-4 rounded accent-brand-600" checked={curatedOnly} onChange={(e) => setCuratedOnly(e.target.checked)} />
|
||
⭐ Alleen officieel
|
||
</label>
|
||
<button className="btn-primary shrink-0" onClick={refresh} disabled={busy}>Zoek</button>
|
||
</div>
|
||
|
||
{error && <p className="text-sm text-danger-700">{error}</p>}
|
||
|
||
{data.rows.length === 0 && !busy ? (
|
||
<div className="surface p-12 text-center text-slate-500">Geen lessen gevonden.</div>
|
||
) : (
|
||
<ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||
{data.rows.map((l, i) => (
|
||
<motion.li
|
||
key={l.id}
|
||
initial={{ opacity: 0, y: 8 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: i * 0.02 }}
|
||
className="surface flex flex-col p-5"
|
||
>
|
||
<div className="mb-2 flex items-center gap-2">
|
||
{l.isCurated && <span className="rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-semibold text-yellow-800">⭐ Curated</span>}
|
||
{l.isFork && <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-300">🍴 Fork</span>}
|
||
</div>
|
||
<h2 className="font-display text-lg font-bold">{l.name}</h2>
|
||
<p className="mt-1 line-clamp-2 text-sm text-slate-500">{l.description ?? <span className="italic">geen beschrijving</span>}</p>
|
||
<div className="mt-3 flex items-center justify-between text-xs text-slate-500">
|
||
<span>door {l.ownerDisplayName}</span>
|
||
<span>{l.totalCards} kaarten · {l.subscribersCount} abonnees</span>
|
||
</div>
|
||
<div className="mt-4 flex gap-2">
|
||
<button className="btn-primary flex-1" onClick={() => subscribe(l.id)}>Abonneer</button>
|
||
<button className="btn-ghost flex-1" onClick={() => fork(l.id)}>🍴 Fork</button>
|
||
</div>
|
||
</motion.li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|