@magicbell/magicbell-react/dist/esm/components/UserPreferencesPanel/CategoryPreferences.js

React components for building a notification inbox for your app

import { useNotificationPreferences } from '@magicbell/react-headless';
import React from 'react';
import { useTranslate } from '../../context/TranslationsContext.js';
import ToggleInput from './ToggleInput.js';
export default function CategoryPreferences({ category, onChange }) {
    const preferences = useNotificationPreferences();
    const channels = category.channels;
    const t = useTranslate();
    const updatePreferences = async (channel, channelEnabled) => {
        const preference = {
            label: category.label,
            slug: category.slug,
            channels: [
                {
                    label: channel.label,
                    slug: channel.slug,
                    enabled: channelEnabled,
                },
            ],
        };
        await preferences.save({ categories: [preference] });
        onChange?.({ category: preference });
    };
    return (React.createElement(React.Fragment, null,
        React.createElement("div", null, t(`preferences.categories.${category.slug}`, category.label)),
        channels.map((channel) => (React.createElement("div", { key: channel.slug },
            React.createElement(ToggleInput, { id: `${category.slug}-${channel.slug}`, value: channel.enabled, onClick: (value) => updatePreferences(channel, value) }))))));
}
//# sourceMappingURL=CategoryPreferences.js.map