useAccessControl()

import { useAccessControl } from '@kobbleio/next/client';

export default function MyComponent() {
    const { isLoading, permissions } = useAccessControl();

    if (isLoading) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <h1>Permissions</h1>
            <ul>
                {permissions.map(permission => (
                    <li key={permission.name}>{permission.name}</li>
                ))}
            </ul>
        </div>
    );
}

import { useAccessControl } from '@kobbleio/next/client';

export default function MyComponent() {
    const { isLoading, quotas } = useAccessControl();

    if (isLoading) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <h1>Quotas</h1>
            <ul>
                {quotas.map(quota => (
                    <li key={quota.name}>
                        <strong>{quota.name}</strong>: {quota.usage} / {quota.limit}
                    </li>
                ))}
            </ul>
        </div>
    );
}

import { useAccessControl } from '@kobbleio/next/client';

export default function MyComponent() {
    const { hasPermission } = useAccessControl();

    return (
        <div>
            {hasPermission('my-permission') ? (
                <p>User has permission</p>
            ) : (
                <p>User does not have permission</p>
            )}
        </div>
    );
}

import { useAccessControl } from '@kobbleio/next/client';

export default function MyComponent() {
    const { hasRemainingQuota } = useAccessControl();

    return (
        <div>
            {hasRemainingQuota('my-quota') ? (
                <p>User has remaining quota</p>
            ) : (
                <p>User does not have remaining quota</p>
            )}
        </div>
    );
}