// tgp-community.jsx v3 — Ontdekken dark tile + clean community tiles
// ─── Community tile (clean, no bg image) ──────────────────────────────────
const CommunityTile = ({ name, members, maxMembers, scope, mode, themes, cost, img, creator, active, onClick, dark }) => {
const scopeColors = { 'Lokaal':'#6B8F6F', 'Nationaal':'#4A7EC4', 'Internationaal':'#C86B4B' };
const col = scopeColors[scope] || '#6B8F6F';
return (
{/* Creator-chosen image */}
{img &&
}
{/* Name */}
{active != null && active &&
}
{name}
{/* Scope + mode chips */}
{scope}
{mode==='Beide'?'Online & Fysiek':mode}
{/* Members + cost */}
{members}{maxMembers ? `/${maxMembers}` : ''} leden
{cost ? `€${cost}/mnd` : 'Gratis'}
{/* Themes */}
{themes.slice(0,2).map(t=>(
{t}
))}
{themes.length > 2 && +{themes.length-2}}
{open && children}
);
return (
{/* Header (clickable to collapse/expand) */}
{sectionOpen && <>
{/* Filters */}
setCatOpen(v=>!v)}>
{CATS.map(c=>(
))}
setModeOpen(v=>!v)}>
{MODES.map(m=>(
))}
{/* Community tiles */}
{filtered.map(c=>(
onDetail(c)} />
))}
{filtered.length===0 && (
Geen communities gevonden
)}
}
{/* Ontdekken dark section */}
{/* Jouw communities */}
{/* Stats */}
{[['6','Communities'],['12','Verzoeken'],['1056','Archief']].map(([n,l])=>(
))}
{/* Title italic serif */}
Jouw communities
{/* Community grid */}
{mine.map(c=>(
onDetail(c)} />
))}
{sheet &&
setSheet(null)} />}
{posts.length === 0 ? (
Nog geen posts in deze community.
) : posts.map((p,i)=>(
setSheet('doeMee')} onBijdragen={()=>setSheet('bijdragen')} onReflecteer={()=>setSheet('reflecteer')} />
))}
{/* Vote rail */}
setVote(v=>v===1?0:1)} />
{score >= 1000 ? `${(score/1000).toFixed(1)}k` : score}
setVote(v=>v===-1?0:-1)} />
{/* Body */}
{/* Top meta */}
{post.cat}
{post.flair && {post.flair}}
u/{post.a} · {post.t}
{/* Title */}
{post.title}
{/* Excerpt */}
{post.excerpt && (
{post.excerpt}
)}
{/* Optional thumbnail */}
{post.thumb && (
)}
{/* Poll */}
{post.poll && (
{post.poll.options.map((o,j)=>{
const pct = Math.round((o.votes/post.poll.total)*100);
return (
);
})}
{post.poll.total} stemmen
)}
{/* Footer actions */}
{post.replies} reacties
Delen
Opslaan
{/* New post CTA */}
Deel iets met de community…
{/* Sort tabs — Reddit style */}
{[
['Hot', '🔥'],
['Nieuw', '🆕'],
['Top', '⭐'],
['Open', '❓'],
].map(([s,em])=>(
))}
{/* Category pills */}
{['Alle','Vraag','Idee','Aankondiging','Discussie','Poll','Project','Resource'].map(c=>(
setCat(c)} style={{ padding:'5px 11px', fontSize:11.5 }}>{c}
))}
{/* Posts */}
{filtered.length === 0 ? (
Nog geen topics in deze categorie.
) : filtered.map((p,i)=>
)}
{/* Search */}
setQuery(e.target.value)}
placeholder="Zoek leden op naam of rol…"
style={{ flex:1, border:'none', background:'transparent', outline:'none', fontSize:13, color:'#020100', fontFamily:'Inter,system-ui,sans-serif' }}
/>
{query && (
)}
{/* Filter pills */}
{[
{ id:'Alle', label:`Alle (${members.length})` },
{ id:'Oudste', label:'Oudste eerst' },
{ id:'Nieuwste', label:'Laatst toegevoegd' },
{ id:'Connecties', label:`Jouw connecties (${members.filter(m=>m.connected).length})` },
].map(f=>(
setFilter(f.id)} style={{ padding:'5px 11px', fontSize:11.5 }}>{f.label}
))}
{/* Count */}
{list.length} {list.length===1?'lid':'leden'}
{filter==='Oudste' && ' · op volgorde van aansluiting'}
{filter==='Nieuwste' && ' · nieuwste bovenaan'}
{/* Compact list */}
{list.map((m,i)=>(
e.currentTarget.style.background='#FAFAFA'}
onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
{/* Avatar */}
{m.online &&
}
{/* Name + role */}
{m.name}
{m.connected && (
Connectie
)}
{m.role}
·
Lid sinds {m.joined}
{/* Actions */}
))}
{list.length === 0 && (
Geen leden gevonden
)}
Over deze community
{content.description}
{stats.map(t=>(
{t}
))}
Contact
{content.contact.map(([Icon,text])=>(
))}
);
};
const CDPracticals = ({ community }) => {
const [typeF, setTypeF] = React.useState('Alle');
const content = getCommunityContent(community);
const items = content.practicals;
const filtered = typeF==='Alle' ? items : items.filter(i=>i.type===typeF);
return (
{['Alle','Knowledge','Building'].map(t=>
setTypeF(t)}>{t})}
{filtered.length === 0 ? (
Nog geen practicals in deze community.
) : (
)}
);
};
// ─── Community detail page ─────────────────────────────────────────────────
const CommunityDetailPage = ({ community, onBack }) => {
const [tab, setTab] = React.useState('Feed');
const c = community || { name:'Community', img:IMG.cOBE, members:0, maxMembers:null, scope:'—', cost:null };
const stats = [
`${c.members}${c.maxMembers?`/${c.maxMembers}`:''} leden`,
c.scope,
c.cost ? `€${c.cost}/mnd` : 'Gratis',
];
return (
{/* Hero */}
Community
{c.name}
{stats.map(t=>(
{t}
))}
{/* Tabs */}
{/* Content */}
{tab==='Feed' && }
{tab==='Forum' && }
{tab==='Practicals' && }
{tab==='Leden' && }
{tab==='Info' && }