mirror of
https://github.com/iib0011/omni-tools.git
synced 2025-09-17 04:59:34 +02:00
feat: enhance Hero component with internationalization and update category translations
This commit is contained in:
AshAnand34
@@ -34,26 +34,63 @@ const GroupHeader = styled('div')(({ theme }) => ({
|
||||
const GroupItems = styled('ul')({
|
||||
padding: 0
|
||||
});
|
||||
const exampleTools: { label: string; url: string }[] = [
|
||||
{
|
||||
label: 'Create a transparent image',
|
||||
url: '/image-generic/create-transparent'
|
||||
},
|
||||
{ label: 'Prettify JSON', url: '/json/prettify' },
|
||||
{ label: 'Change GIF speed', url: '/gif/change-speed' },
|
||||
{ label: 'Sort a list', url: '/list/sort' },
|
||||
{ label: 'Compress PNG', url: '/png/compress-png' },
|
||||
{ label: 'Split a text', url: '/string/split' },
|
||||
{ label: 'Split PDF', url: '/pdf/split-pdf' },
|
||||
{ label: 'Trim video', url: '/video/trim' },
|
||||
{ label: 'Calculate number sum', url: '/number/sum' }
|
||||
];
|
||||
|
||||
export default function Hero() {
|
||||
const { t } = useTranslation();
|
||||
const [inputValue, setInputValue] = useState<string>('');
|
||||
const theme = useTheme();
|
||||
const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(tools);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const exampleTools: { label: string; url: string; translationKey: string }[] =
|
||||
[
|
||||
{
|
||||
label: t('hero.examples.createTransparentImage'),
|
||||
url: '/image-generic/create-transparent',
|
||||
translationKey: 'hero.examples.createTransparentImage'
|
||||
},
|
||||
{
|
||||
label: t('hero.examples.prettifyJson'),
|
||||
url: '/json/prettify',
|
||||
translationKey: 'hero.examples.prettifyJson'
|
||||
},
|
||||
{
|
||||
label: t('hero.examples.changeGifSpeed'),
|
||||
url: '/gif/change-speed',
|
||||
translationKey: 'hero.examples.changeGifSpeed'
|
||||
},
|
||||
{
|
||||
label: t('hero.examples.sortList'),
|
||||
url: '/list/sort',
|
||||
translationKey: 'hero.examples.sortList'
|
||||
},
|
||||
{
|
||||
label: t('hero.examples.compressPng'),
|
||||
url: '/png/compress-png',
|
||||
translationKey: 'hero.examples.compressPng'
|
||||
},
|
||||
{
|
||||
label: t('hero.examples.splitText'),
|
||||
url: '/string/split',
|
||||
translationKey: 'hero.examples.splitText'
|
||||
},
|
||||
{
|
||||
label: t('hero.examples.splitPdf'),
|
||||
url: '/pdf/split-pdf',
|
||||
translationKey: 'hero.examples.splitPdf'
|
||||
},
|
||||
{
|
||||
label: t('hero.examples.trimVideo'),
|
||||
url: '/video/trim',
|
||||
translationKey: 'hero.examples.trimVideo'
|
||||
},
|
||||
{
|
||||
label: t('hero.examples.calculateNumberSum'),
|
||||
url: '/number/sum',
|
||||
translationKey: 'hero.examples.calculateNumberSum'
|
||||
}
|
||||
];
|
||||
|
||||
const handleInputChange = (
|
||||
event: React.ChangeEvent<{}>,
|
||||
newInputValue: string
|
||||
@@ -146,7 +183,7 @@ export default function Hero() {
|
||||
xs={12}
|
||||
md={6}
|
||||
lg={4}
|
||||
key={tool.label}
|
||||
key={tool.translationKey}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
|
||||
@@ -43,7 +43,18 @@
|
||||
"title": "Get Things Done Quickly with",
|
||||
"brand": "OmniTools",
|
||||
"description": "Boost your productivity with OmniTools, the ultimate toolkit for getting things done quickly! Access thousands of user-friendly utilities for editing images, text, lists, and data, all directly from your browser.",
|
||||
"searchPlaceholder": "Search all tools"
|
||||
"searchPlaceholder": "Search all tools",
|
||||
"examples": {
|
||||
"createTransparentImage": "Create a transparent image",
|
||||
"prettifyJson": "Prettify JSON",
|
||||
"changeGifSpeed": "Change GIF speed",
|
||||
"sortList": "Sort a list",
|
||||
"compressPng": "Compress PNG",
|
||||
"splitText": "Split a text",
|
||||
"splitPdf": "Split PDF",
|
||||
"trimVideo": "Trim video",
|
||||
"calculateNumberSum": "Calculate number sum"
|
||||
}
|
||||
},
|
||||
"toolHeader": {
|
||||
"seeExamples": "See Examples"
|
||||
@@ -183,5 +194,61 @@
|
||||
"description": "Just upload your CSV file in the form below and this tool will automatically check if none of the rows or columns are missing values. In the tool options, you can adjust the input file format (specify the delimiter, quote character, and comment character). Additionally, you can enable checking for empty values, skip empty lines, and set a limit on the number of error messages in the output.",
|
||||
"shortDescription": "Quickly find rows and columns in CSV that are missing values."
|
||||
}
|
||||
},
|
||||
"categories": {
|
||||
"string": {
|
||||
"title": "Text Tools",
|
||||
"description": "Tools for working with text – convert text to images, find and replace text, split text into fragments, join text lines, repeat text, and much more."
|
||||
},
|
||||
"png": {
|
||||
"title": "PNG Tools",
|
||||
"description": "Tools for working with PNG images – convert PNGs to JPGs, create transparent PNGs, change PNG colors, crop, rotate, resize PNGs, and much more."
|
||||
},
|
||||
"number": {
|
||||
"title": "Number Tools",
|
||||
"description": "Tools for working with numbers – generate number sequences, convert numbers to words and words to numbers, sort, round, factor numbers, and much more."
|
||||
},
|
||||
"gif": {
|
||||
"title": "GIF Tools",
|
||||
"description": "Tools for working with GIF animations – create transparent GIFs, extract GIF frames, add text to GIF, crop, rotate, reverse GIFs, and much more."
|
||||
},
|
||||
"list": {
|
||||
"title": "List Tools",
|
||||
"description": "Tools for working with lists – sort, reverse, randomize lists, find unique and duplicate list items, change list item separators, and much more."
|
||||
},
|
||||
"json": {
|
||||
"title": "JSON Tools",
|
||||
"description": "Tools for working with JSON data structures – prettify and minify JSON objects, flatten JSON arrays, stringify JSON values, analyze data, and much more"
|
||||
},
|
||||
"time": {
|
||||
"title": "Time Tools",
|
||||
"description": "Tools for working with time and date – calculate time differences, convert between time zones, format dates, generate date sequences, and much more."
|
||||
},
|
||||
"csv": {
|
||||
"title": "CSV Tools",
|
||||
"description": "Tools for working with CSV files - convert CSV to different formats, manipulate CSV data, validate CSV structure, and process CSV files efficiently."
|
||||
},
|
||||
"video": {
|
||||
"title": "Video Tools",
|
||||
"description": "Tools for working with videos – extract frames from videos, create GIFs from videos, convert videos to different formats, and much more."
|
||||
},
|
||||
"pdf": {
|
||||
"title": "PDF Tools",
|
||||
"description": "Tools for working with PDF files - extract text from PDFs, convert PDFs to other formats, manipulate PDFs, and much more."
|
||||
},
|
||||
"image-generic": {
|
||||
"title": "Image Tools",
|
||||
"description": "Tools for working with pictures – compress, resize, crop, convert to JPG, rotate, remove background and much more."
|
||||
},
|
||||
"audio": {
|
||||
"title": "Audio Tools",
|
||||
"description": "Tools for working with audio – extract audio from video, adjusting audio speed, merging multiple audio files and much more."
|
||||
},
|
||||
"xml": {
|
||||
"title": "XML Tools",
|
||||
"description": "Tools for working with XML data structures - viewer, beautifier, validator and much more"
|
||||
},
|
||||
"seeAll": "See all {{title}}",
|
||||
"try": "Try {{title}}"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,7 +43,18 @@
|
||||
"title": "के साथ जल्दी काम करें",
|
||||
"brand": "ओमनीटूल्स",
|
||||
"description": "ओमनीटूल्स के साथ अपनी उत्पादकता बढ़ाएं, जल्दी काम करने के लिए अंतिम टूलकिट! छवियों, टेक्स्ट, सूचियों और डेटा को संपादित करने के लिए हजारों उपयोगकर्ता-अनुकूल उपयोगिताओं तक पहुंचें, सभी सीधे अपने ब्राउज़र से।",
|
||||
"searchPlaceholder": "सभी टूल्स खोजें"
|
||||
"searchPlaceholder": "सभी टूल्स खोजें",
|
||||
"examples": {
|
||||
"createTransparentImage": "पारदर्शी छवि बनाएं",
|
||||
"prettifyJson": "JSON सुंदर बनाएं",
|
||||
"changeGifSpeed": "GIF गति बदलें",
|
||||
"sortList": "सूची क्रमबद्ध करें",
|
||||
"compressPng": "PNG संपीड़ित करें",
|
||||
"splitText": "टेक्स्ट विभाजित करें",
|
||||
"splitPdf": "PDF विभाजित करें",
|
||||
"trimVideo": "वीडियो ट्रिम करें",
|
||||
"calculateNumberSum": "संख्याओं का योग करें"
|
||||
}
|
||||
},
|
||||
"toolHeader": {
|
||||
"seeExamples": "उदाहरण देखें"
|
||||
@@ -183,5 +194,61 @@
|
||||
"description": "बस नीचे फॉर्म में अपनी सीएसवी फ़ाइल अपलोड करें और यह टूल स्वचालित रूप से जांच करेगा कि क्या कोई पंक्ति या स्तंभ मूल्य नहीं खो रहे हैं। टूल विकल्पों में, आप इनपुट फ़ाइल प्रारूप को समायोजित कर सकते हैं (विभाजक, उद्धरण वर्ण, और टिप्पणी वर्ण निर्दिष्ट करें)। इसके अतिरिक्त, आप खाली मूल्यों की जांच सक्षम कर सकते हैं, खाली पंक्तियों को छोड़ सकते हैं, और आउटपुट में त्रुटि संदेशों की संख्या पर सीमा निर्धारित कर सकते हैं।",
|
||||
"shortDescription": "सीएसवी में जल्दी से पंक्तियां और स्तंभ खोजें जो मूल्य खो रहे हैं।"
|
||||
}
|
||||
},
|
||||
"categories": {
|
||||
"string": {
|
||||
"title": "टेक्स्ट टूल्स",
|
||||
"description": "टेक्स्ट के साथ काम करने के लिए टूल्स – टेक्स्ट को छवियों में बदलें, टेक्स्ट खोजें और बदलें, टेक्स्ट को टुकड़ों में विभाजित करें, टेक्स्ट पंक्तियों को जोड़ें, टेक्स्ट दोहराएं, और बहुत कुछ।"
|
||||
},
|
||||
"png": {
|
||||
"title": "PNG टूल्स",
|
||||
"description": "PNG छवियों के साथ काम करने के लिए टूल्स – PNG को JPG में बदलें, पारदर्शी PNG बनाएं, PNG रंग बदलें, क्रॉप, घुमाएं, PNG का आकार बदलें, और बहुत कुछ।"
|
||||
},
|
||||
"number": {
|
||||
"title": "संख्या टूल्स",
|
||||
"description": "संख्याओं के साथ काम करने के लिए टूल्स – संख्या अनुक्रम उत्पन्न करें, संख्याओं को शब्दों में और शब्दों को संख्याओं में बदलें, क्रमबद्ध करें, गोल करें, संख्याओं का गुणनखंड करें, और बहुत कुछ।"
|
||||
},
|
||||
"gif": {
|
||||
"title": "GIF टूल्स",
|
||||
"description": "GIF एनिमेशन के साथ काम करने के लिए टूल्स – पारदर्शी GIF बनाएं, GIF फ्रेम निकालें, GIF में टेक्स्ट जोड़ें, क्रॉप, घुमाएं, GIF को उलटा करें, और बहुत कुछ।"
|
||||
},
|
||||
"list": {
|
||||
"title": "सूची टूल्स",
|
||||
"description": "सूचियों के साथ काम करने के लिए टूल्स – क्रमबद्ध करें, उलटा करें, सूचियों को यादृच्छिक करें, अद्वितीय और डुप्लिकेट सूची आइटम खोजें, सूची आइटम विभाजक बदलें, और बहुत कुछ।"
|
||||
},
|
||||
"json": {
|
||||
"title": "JSON टूल्स",
|
||||
"description": "JSON डेटा संरचनाओं के साथ काम करने के लिए टूल्स – JSON ऑब्जेक्ट को सुंदर और संक्षिप्त करें, JSON सरणियों को समतल करें, JSON मूल्यों को स्ट्रिंगिफाई करें, डेटा का विश्लेषण करें, और बहुत कुछ"
|
||||
},
|
||||
"time": {
|
||||
"title": "समय टूल्स",
|
||||
"description": "समय और तिथि के साथ काम करने के लिए टूल्स – समय अंतर की गणना करें, समय क्षेत्रों के बीच बदलें, तिथियों को फॉर्मेट करें, तिथि अनुक्रम उत्पन्न करें, और बहुत कुछ।"
|
||||
},
|
||||
"csv": {
|
||||
"title": "CSV टूल्स",
|
||||
"description": "CSV फ़ाइलों के साथ काम करने के लिए टूल्स - CSV को विभिन्न प्रारूपों में बदलें, CSV डेटा में हेरफेर करें, CSV संरचना को मान्य करें, और CSV फ़ाइलों को कुशलतापूर्वक संसाधित करें।"
|
||||
},
|
||||
"video": {
|
||||
"title": "वीडियो टूल्स",
|
||||
"description": "वीडियो के साथ काम करने के लिए टूल्स – वीडियो से फ्रेम निकालें, वीडियो से GIF बनाएं, वीडियो को विभिन्न प्रारूपों में बदलें, और बहुत कुछ।"
|
||||
},
|
||||
"pdf": {
|
||||
"title": "PDF टूल्स",
|
||||
"description": "PDF फ़ाइलों के साथ काम करने के लिए टूल्स - PDF से टेक्स्ट निकालें, PDF को अन्य प्रारूपों में बदलें, PDF में हेरफेर करें, और बहुत कुछ।"
|
||||
},
|
||||
"image-generic": {
|
||||
"title": "छवि टूल्स",
|
||||
"description": "चित्रों के साथ काम करने के लिए टूल्स – संपीड़ित करें, आकार बदलें, क्रॉप करें, JPG में बदलें, घुमाएं, पृष्ठभूमि हटाएं और बहुत कुछ।"
|
||||
},
|
||||
"audio": {
|
||||
"title": "ऑडियो टूल्स",
|
||||
"description": "ऑडियो के साथ काम करने के लिए टूल्स – वीडियो से ऑडियो निकालें, ऑडियो गति समायोजित करें, कई ऑडियो फ़ाइलों को मर्ज करें और बहुत कुछ।"
|
||||
},
|
||||
"xml": {
|
||||
"title": "XML टूल्स",
|
||||
"description": "XML डेटा संरचनाओं के साथ काम करने के लिए टूल्स - व्यूअर, ब्यूटिफायर, वैलिडेटर और बहुत कुछ"
|
||||
},
|
||||
"seeAll": "सभी {{title}} देखें",
|
||||
"try": "{{title}} आज़माएं"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ import Button from '@mui/material/Button';
|
||||
import { useState } from 'react';
|
||||
import { categoriesColors } from 'config/uiConfig';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
type ArrayElement<ArrayType extends readonly unknown[]> =
|
||||
ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
|
||||
@@ -18,10 +19,25 @@ const SingleCategory = function ({
|
||||
category: ArrayElement<ReturnType<typeof getToolsByCategory>>;
|
||||
index: number;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const [hovered, setHovered] = useState<boolean>(false);
|
||||
const toggleHover = () => setHovered((prevState) => !prevState);
|
||||
|
||||
// Get translated category title and description
|
||||
const categoryTitle = t(`categories.${category.type}.title`, category.title);
|
||||
const categoryDescription = t(
|
||||
`categories.${category.type}.description`,
|
||||
category.description
|
||||
);
|
||||
const seeAllText = t('categories.seeAll', 'See all {{title}}', {
|
||||
title: categoryTitle
|
||||
});
|
||||
const tryText = t('categories.try', 'Try {{title}}', {
|
||||
title: category.example.title
|
||||
});
|
||||
|
||||
return (
|
||||
<Grid
|
||||
item
|
||||
@@ -60,10 +76,10 @@ const SingleCategory = function ({
|
||||
}}
|
||||
to={'/categories/' + category.type}
|
||||
>
|
||||
{category.title}
|
||||
{categoryTitle}
|
||||
</Link>
|
||||
</Stack>
|
||||
<Typography sx={{ mt: 2 }}>{category.description}</Typography>
|
||||
<Typography sx={{ mt: 2 }}>{categoryDescription}</Typography>
|
||||
</Box>
|
||||
<Grid mt={1} container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
@@ -71,7 +87,9 @@ const SingleCategory = function ({
|
||||
fullWidth
|
||||
onClick={() => navigate('/categories/' + category.type)}
|
||||
variant={'contained'}
|
||||
>{`See all ${category.title}`}</Button>
|
||||
>
|
||||
{seeAllText}
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Button
|
||||
@@ -79,7 +97,9 @@ const SingleCategory = function ({
|
||||
fullWidth
|
||||
onClick={() => navigate(category.example.path)}
|
||||
variant={'outlined'}
|
||||
>{`Try ${category.example.title}`}</Button>
|
||||
>
|
||||
{tryText}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user