#localisation "translate" with select input ?

5 messages · Page 1 of 1 (latest)

rustic palm
#

hi, how can we handle localisation with https://mantine.dev/core/select/
it seem using label as keys ?
am not sure how to proceed ?

Is there a way to pass both keys and labels to only translate the labels while keeping the shared keys intact?

ex:

type SortByGroup = 'Dates' | 'Dificulty' | 'Longeur';
type SortByType = 'recent' | 'older' | 'easier' | 'harder' | 'longer' | 'shorter';
type SortByData = { group: SortByGroup, items: SortByType[] }[];

function SortBy( props: { onSortByChange?: ( sortBy: SortByType ) => void }) {
    const { t } = useTranslation();
    
    // original data keys (but they seem also use as labels !?)
    const sortByData: SortByData = [
        { group: 'Dates', items: ['recent', 'older'] },
        { group: 'Dificulty', items: ['easier', 'harder'] },
        { group: 'Longeur', items: ['longer', 'shorter'] },
    ];

    // here where we translate labels, but we dont want translate keys, there are share in software.
    const tsortByData = sortByData.map( ( group ) => {
        return {
            group: t( `main:pages.blogs.sort-by.${group.group}` ),
            items: group.items.map( ( item ) => t( `main:pages.blogs.sort-by.${item}` ) ),
        };
    }) satisfies SortByData;

    return (
        <Select
            data={tsortByData}
            defaultValue={'plus recente'}
            ml={'auto'}
            radius={'xs'}
            size={'xs'}
            onChange={( v ) => props.onSortByChange?.( v as SortByType )}
        />
    );
}

maybe soemthing like?

type SortByData = { group: SortByGroup, items: SortByType[], itemsLabels:string[], groupLabels:string[] }[];

am actually using this hook in my whole app.
this box is the only one who am not sure how to localize "translate".
https://react.i18next.com/latest/usetranslation-hook

unique kraken
rustic palm
#

tank you a lot !

rustic palm
# unique kraken https://mantine.dev/core/select/#data-formats

hum, is it possible also for group ?

function SortBy( ) {
    const { t } = useTranslation();

    const { sortBy } = $store.proxi;
    const sortByData: SortByData = [
        {
            group: 'Date',
            label: t( 'main:commun.date' ), // NOTE: labeling the group ? not work !
            items: [
                { value: 'recent', label: t( 'main:commun.recent' ) },
                { value: 'older', label: t( 'main:commun.older' ) }
            ],
        },
    ];

    return (
        <Select
            allowDeselect={false}
            clearable={false}
            data={sortByData}
            ml={'auto'}
            radius={'xs'}
            size={'xs'}
            value={sortBy}
            onChange={( v ) => {
                $store.proxi.sortBy = v as SortByType;
            }}
        />
    );
}
image.png
static tide