una/neo/packages/app/components/elements/notifications-settings.js

import { Text } from 'app/design/typography'
import { View, Row } from 'app/design/view'
import { useState } from 'react';
import Switch from 'app/ui/atoms/switcher'
import { fetcher } from 'app/lib/fetcher';
import { NeoButton } from 'app/design/controls'
import { firstLetterCap } from 'app/lib/util';
import { useTranslation } from 'react-i18next';
import { BlockWrapper } from 'app/components/block-wrapper'

export default function (props, blockWrapperProps) {
    const [activeIndex, setActiveIndex] = useState(0);
    let aData = [];
    const { t } = useTranslation();
    props.data.data.forEach((item, index) => {
        let aItems = [];
        item.items.forEach((item2, index) => {
            if (typeof item2 === 'string') {
                aItems.push({ type: 'header', title: item2 });
            }
            else {
                aItems.push({ type: 'item', title: item2.title.value, value: item2.switcher.data, id: item2.checkbox.data });
            }
        });
        aData.push({ title: item.delivery, items: aItems })
    })
    const [data, setData] = useState(aData);

    const toggleSwitch = (id, value) => {
        fetcher(props.request_url + JSON.stringify({ id, value }));



        setData(prevData => prevData.map((item, index) => index === activeIndex ? {
            ...item,
            items: item.items.map(item => item.id === id ? { ...item, value: item.value === 1 ? 0 : 1 } : item)
        } : item));
    }

    return <BlockWrapper {...blockWrapperProps}>
        <Row className='p-2'>
            {
                data.map((item, index) => {
                    return <View className='mr-2 ' key={'tab' + index}><NeoButton
                        style={index == activeIndex ? undefined : 'borderless'}
                        selected={index == activeIndex}
                        label={t(firstLetterCap(item.title))}
                        borderShape="capsule"
                        controlSize="small"
                        onPress={() => setActiveIndex(index)}
                    /></View>
                })
            }
        </Row>
        {
            data[activeIndex].items.map((item, index) => {
                if (item.type == 'header') {
                    return (<Row className='p-2' key={"row" + index}>
                        <Text className="text-popover-foreground  text-sm font-semibold">{item.title}</Text>
                    </Row>)
                }
                else {
                    return (
                        <Row className='px-2 py-1' key={"row" + index}>
                            <Switch
                                onValueChange={() => toggleSwitch(item.id, item.value == 1 ? 0 : 1)}
                                value={item.value == 1 ? true : false}
                            />
                            <Text className="ml-2 text-popover-foreground  text-sm">{item.title}</Text>
                        </Row>
                    )
                }
            })
        }
    </BlockWrapper>
}