Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 15:35:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adding some translations

Browse Source
This commit is contained in:
ajnart
2023-01-02 01:11:25 +09:00
parent f23c317ef1
commit be979dc534
10 changed files with 56 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx
View File

@@ -17,6 +17,7 @@ import { UseFormReturnType } from '@mantine/form';
import { useDebouncedValue } from '@mantine/hooks';
import { IconSearch, IconX } from '@tabler/icons';
import { useEffect, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { ICON_PICKER_SLICE_LIMIT } from '../../../../../../../../data/constants';
import { IconSelectorItem } from '../../../../../../../types/iconSelector/iconSelectorItem';
import { WalkxcodeRepositoryIcon } from '../../../../../../../types/iconSelector/repositories/walkxcodeIconRepository';
@@ -72,6 +73,8 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe
const isTruncated =
slicedFilteredItems.length > 0 && slicedFilteredItems.length !== filteredItems.length;
const { t } = useTranslation('layout/tools');
return (
<Popover width={310}>
<Popover.Target>
@@ -88,7 +91,7 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe
<TextInput
value={searchTerm}
onChange={(event) => setSearchTerm(event.currentTarget.value)}
placeholder="Search for icons..."
placeholder={t('iconPicker.textInputPlaceholder')}
variant="filled"
rightSection={
<ActionIcon onClick={() => setSearchTerm('')}>
@@ -110,11 +113,10 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe
<Stack spacing="xs" pr={15}>
<Divider mt={35} mx="xl" />
<Title order={6} color="dimmed" align="center">
Search is limited to {ICON_PICKER_SLICE_LIMIT} icons
{t('iconPicker.searchLimitationTitle', { max: ICON_PICKER_SLICE_LIMIT })}
</Title>
<Text color="dimmed" align="center" size="sm">
To keep things snappy and fast, the search is limited to {ICON_PICKER_SLICE_LIMIT}{' '}
icons. Use the search box to find more icons.
{t('iconPicker.searchLimitationMessage', { max: ICON_PICKER_SLICE_LIMIT })}
</Text>
</Stack>
)}