41 lines
1.1 KiB
React
41 lines
1.1 KiB
React
|
import { useEntitlements } from '../context/EntitlementsContext'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Zeigt Vereins-Kontingent für ein Feature (M4 UsageBadge).
|
||
|
|
* Unbegrenzt (limit null) → nichts rendern.
|
||
|
|
*/
|
||
|
|
export default function FeatureUsageBadge({ featureId = 'ai_calls', label = 'KI-Kontingent' }) {
|
||
|
|
const { entitlements, loading, getFeature } = useEntitlements()
|
||
|
|
const feat = getFeature(featureId)
|
||
|
|
|
||
|
|
if (loading && !feat) {
|
||
|
|
return (
|
||
|
|
<span className="feature-usage-badge muted" style={{ fontSize: '0.8rem' }}>
|
||
|
|
{label}: …
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!feat) return null
|
||
|
|
|
||
|
|
const { used = 0, limit, remaining, allowed } = feat
|
||
|
|
if (limit == null) return null
|
||
|
|
|
||
|
|
const tone = !allowed || remaining === 0 ? 'var(--danger)' : 'var(--text2)'
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className="feature-usage-badge"
|
||
|
|
style={{ fontSize: '0.8rem', color: tone }}
|
||
|
|
title={
|
||
|
|
entitlements?.plan_id
|
||
|
|
? `Plan: ${entitlements.plan_id}`
|
||
|
|
: undefined
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{label}: {used}/{limit}
|
||
|
|
{remaining != null ? ` (${remaining} übrig)` : ''}
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|