marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-16 04:29:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: ui changes

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-02-25 06:17:10 +00:00
parent 8917c3c2ec
commit d4c544609a
35 changed files with 190 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
.idea/workspace.xml generated
View File

@@ -4,8 +4,43 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: docs">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: funding">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Navbar/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Navbar/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/ToolLayout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolLayout.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/config/uiConfig.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/home/Categories.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/Categories.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/compress-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/compress-png/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/convert-jgp-to-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/convert-jgp-to-png/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/find-most-popular/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/find-most-popular/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/find-unique/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/find-unique/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/group/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/group/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/reverse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/reverse/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/rotate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/rotate/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/shuffle/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/shuffle/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/sort/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/sort/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/unwrap/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/unwrap/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/number/generate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/generate/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/number/sum/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/sum/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/join/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/join/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/split/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/split/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/to-morse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/to-morse/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/video/gif/change-speed/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/video/gif/change-speed/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/tools/defineTool.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/defineTool.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -76,7 +111,7 @@
&quot;git-widget-placeholder&quot;: &quot;main&quot;,
&quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
&quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
&quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/src/assets&quot;,
&quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/.github&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
@@ -109,11 +144,11 @@
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\.github" />
<recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\assets" />
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\assets" />
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string" />
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string\split" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\pages\tools" />
@@ -255,14 +290,8 @@
<workItem from="1740318886545" duration="856000" />
<workItem from="1740348963270" duration="388000" />
<workItem from="1740399426653" duration="627000" />
</task>
<task id="LOCAL-00061" summary="feat: make responsive">
<option name="closed" value="true" />
<created>1719358195260</created>
<option name="number" value="00061" />
<option name="presentableId" value="LOCAL-00061" />
<option name="project" value="LOCAL" />
<updated>1719358195260</updated>
<workItem from="1740459961271" duration="66000" />
<workItem from="1740460036909" duration="4124000" />
</task>
<task id="LOCAL-00062" summary="feat: make tool responsive">
<option name="closed" value="true" />
@@ -648,7 +677,15 @@
<option name="project" value="LOCAL" />
<updated>1740324274955</updated>
</task>
<option name="localTasksCounter" value="110" />
<task id="LOCAL-00110" summary="feat: funding">
<option name="closed" value="true" />
<created>1740460017596</created>
<option name="number" value="00110" />
<option name="presentableId" value="LOCAL-00110" />
<option name="project" value="LOCAL" />
<updated>1740460017596</updated>
</task>
<option name="localTasksCounter" value="111" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -680,7 +717,6 @@
<option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
<option name="CHECK_NEW_TODO" value="false" />
<option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
<MESSAGE value="ci: run e2e tests" />
<MESSAGE value="fix: ci" />
<MESSAGE value="chore: jimp types" />
<MESSAGE value="fix: package.json" />
@@ -705,7 +741,8 @@
<MESSAGE value="feat: compress png" />
<MESSAGE value="fix: compress png" />
<MESSAGE value="fix: docs" />
<option name="LAST_COMMIT_MESSAGE" value="fix: docs" />
<MESSAGE value="feat: funding" />
<option name="LAST_COMMIT_MESSAGE" value="feat: funding" />
</component>
<component name="XSLT-Support.FileAssociations.UIState">
<expand />

5
README.md
View File

@@ -1,5 +1,4 @@
<p align="center"><img src="src/assets/logo.png" width="80"></p>
<h1 align="center">OmniTools</h1>
<p align="center"><img src="src/assets/logo.png" width="150"></p>
[//]: # ([![Docker Pulls]&#40;https://img.shields.io/docker/pulls/iib0011/omni-tools&#41;]&#40;https://hub.docker.com/r/iib0011/omni-tools&#41;)
@@ -100,7 +99,7 @@ npm run test
npm run test:e2e
```
[//]: # (<img src="https://api.star-history.com/svg?repos=iib0011/omni-tools&type=Date">)
<img src="https://api.star-history.com/svg?repos=iib0011/omni-tools&type=Date">
## 🤝 Looking to contribute?

24
package-lock.json generated
View File

@@ -37,6 +37,7 @@
"devDependencies": {
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@iconify/react": "^5.2.0",
"@testing-library/jest-dom": "^6.4.5",
"@testing-library/react": "^14.3.1",
"@types/color": "^3.0.6",
@@ -1472,6 +1473,29 @@
"deprecated": "Use @eslint/object-schema instead",
"dev": true
},
"node_modules/@iconify/react": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@iconify/react/-/react-5.2.0.tgz",
"integrity": "sha512-7Sdjrqq3fkkQNks9SY3adGC37NQTHsBJL2PRKlQd455PoDi9s+Es9AUTY+vGLFOYs5yO9w9yCE42pmxCwG26WA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
},
"peerDependencies": {
"react": ">=16"
}
},
"node_modules/@iconify/types": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
"dev": true,
"license": "MIT"
},
"node_modules/@isaacs/cliui": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",

1
package.json
View File

@@ -54,6 +54,7 @@
"devDependencies": {
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@iconify/react": "^5.2.0",
"@testing-library/jest-dom": "^6.4.5",
"@testing-library/react": "^14.3.1",
"@types/color": "^3.0.6",

3
scripts/create-tool.mjs
View File

@@ -92,12 +92,11 @@ createToolFile(
`
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
// import image from '@assets/text.png';
export const tool = defineTool('${type}', {
name: '${toolNameTitleCase}',
path: '${toolName}',
// image,
icon: '',
description: '',
shortDescription: '',
keywords: ['${toolName.split('-').join("', '")}'],

4
src/components/Hero.tsx
View File

@@ -75,7 +75,8 @@ export default function Hero() {
...params.InputProps,
endAdornment: <SearchIcon />,
sx: {
borderRadius: 4
borderRadius: 4,
backgroundColor: 'white'
}
}}
onChange={(event) => handleInputChange(event, event.target.value)}
@@ -114,6 +115,7 @@ export default function Hero() {
borderRadius: 3,
borderColor: 'grey',
borderStyle: 'solid',
backgroundColor: 'white',
cursor: 'pointer',
'&:hover': { backgroundColor: '#FAFAFD' }
}}

13
src/components/Navbar/index.tsx
View File

@@ -50,9 +50,18 @@ const Navbar: React.FC = () => {
return (
<AppBar
position="static"
style={{ backgroundColor: 'white', color: 'black' }}
style={{
backgroundColor: 'white',
color: 'black'
}}
>
<Toolbar
sx={{
justifyContent: 'space-between',
alignItems: 'center',
boxShadow: '0px 2px 2px #C8C9CE'
}}
>
<Toolbar sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
<img
onClick={() => navigate('/')}
style={{ cursor: 'pointer' }}

39
src/components/ToolHeader.tsx
View File

@@ -3,11 +3,13 @@ import Typography from '@mui/material/Typography';
import ToolBreadcrumb from './ToolBreadcrumb';
import { capitalizeFirstLetter } from '../utils/string';
import Grid from '@mui/material/Grid';
import { Icon, IconifyIcon } from '@iconify/react';
import { categoriesColors } from '../config/uiConfig';
interface ToolHeaderProps {
title: string;
description: string;
image?: string;
icon?: IconifyIcon;
type: string;
}
@@ -15,17 +17,32 @@ function ToolLinks() {
return (
<Grid container spacing={2} mt={1}>
<Grid item md={12} lg={4}>
<Button fullWidth variant="outlined" href="#tool">
<Button
sx={{ backgroundColor: 'white' }}
fullWidth
variant="outlined"
href="#tool"
>
Use This Tool
</Button>
</Grid>
<Grid item md={12} lg={4}>
<Button fullWidth variant="outlined" href="#examples">
<Button
sx={{ backgroundColor: 'white' }}
fullWidth
variant="outlined"
href="#examples"
>
See Examples
</Button>
</Grid>
<Grid item md={12} lg={4}>
<Button fullWidth variant="outlined" href="#tour">
<Button
sx={{ backgroundColor: 'white' }}
fullWidth
variant="outlined"
href="#tour"
>
Learn How to Use
</Button>
</Grid>
@@ -34,7 +51,7 @@ function ToolLinks() {
}
export default function ToolHeader({
image,
icon,
title,
description,
type
@@ -60,10 +77,18 @@ export default function ToolHeader({
<ToolLinks />
</Grid>
{image && (
{icon && (
<Grid item xs={12} md={4}>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<img width={'250'} src={image} />
<Icon
icon={icon}
fontSize={'250'}
color={
categoriesColors[
Math.floor(Math.random() * categoriesColors.length)
]
}
/>
</Box>
</Grid>
)}

8
src/components/ToolLayout.tsx
View File

@@ -6,17 +6,18 @@ import Separator from './Separator';
import AllTools from './allTools/AllTools';
import { getToolsByCategory } from '@tools/index';
import { capitalizeFirstLetter } from '../utils/string';
import { IconifyIcon } from '@iconify/react';
export default function ToolLayout({
children,
title,
description,
image,
icon,
type
}: {
title: string;
description: string;
image?: string;
icon?: IconifyIcon | string;
type: string;
children: ReactNode;
}) {
@@ -36,6 +37,7 @@ export default function ToolLayout({
display={'flex'}
flexDirection={'column'}
alignItems={'center'}
sx={{ backgroundColor: '#F5F5FA' }}
>
<Helmet>
<title>{`${title} - Omni Tools`}</title>
@@ -44,7 +46,7 @@ export default function ToolLayout({
<ToolHeader
title={title}
description={description}
image={image}
icon={icon}
type={type}
/>
{children}

3
src/components/input/ToolFileInput.tsx
View File

@@ -83,7 +83,8 @@ export default function ToolFileInput({
height: globalInputHeight,
border: preview ? 0 : 1,
borderRadius: 2,
boxShadow: '5'
boxShadow: '5',
bgcolor: 'white'
}}
>
{preview ? (

9
src/components/input/ToolTextInput.tsx
View File

@@ -50,7 +50,14 @@ export default function ToolTextInput({
fullWidth
multiline
rows={10}
inputProps={{ 'data-testid': 'text-input' }}
sx={{
'&.MuiTextField-root': {
backgroundColor: 'white'
}
}}
inputProps={{
'data-testid': 'text-input'
}}
/>
<InputFooter handleCopy={handleCopy} handleImport={handleImportClick} />
<input

3
src/components/result/ToolFileResult.tsx
View File

@@ -67,7 +67,8 @@ export default function ToolFileResult({
height: globalInputHeight,
border: preview ? 0 : 1,
borderRadius: 2,
boxShadow: '5'
boxShadow: '5',
bgcolor: 'white'
}}
>
{preview && (

5
src/components/result/ToolTextResult.tsx
View File

@@ -41,6 +41,11 @@ export default function ToolTextResult({
value={replaceSpecialCharacters(value)}
fullWidth
multiline
sx={{
'&.MuiTextField-root': {
backgroundColor: 'white'
}
}}
rows={10}
inputProps={{ 'data-testid': 'text-result' }}
/>

6
src/config/uiConfig.ts
View File

@@ -1,2 +1,8 @@
export const globalInputHeight = 300;
export const globalDescriptionFontSize = 12;
export const categoriesColors: string[] = [
'#8FBC5D',
'#3CB6E2',
'#FFD400',
'#AB6993'
];

2
src/pages/home/index.tsx
View File

@@ -5,7 +5,7 @@ import Categories from './Categories';
export default function Home() {
return (
<Box
padding={{ xs: 1, md: 3, lg: 5 }}
padding={{ xs: 1, md: 3, lg: 5, backgroundColor: '#F5F5FA' }}
display={'flex'}
flexDirection={'column'}
alignItems={'center'}

17
src/pages/tools-by-category/index.tsx
View File

@@ -5,14 +5,15 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
import { getToolsByCategory } from '../../tools';
import Hero from 'components/Hero';
import { capitalizeFirstLetter } from '../../utils/string';
import toolsPng from '@assets/tools.png';
import { Icon } from '@iconify/react';
import { categoriesColors } from 'config/uiConfig';
export default function Home() {
const navigate = useNavigate();
const theme = useTheme();
const { categoryName } = useParams();
return (
<Box>
<Box sx={{ backgroundColor: '#F5F5FA' }}>
<Box
padding={{ xs: 1, md: 3, lg: 5 }}
display={'flex'}
@@ -32,10 +33,12 @@ export default function Home() {
<Grid container spacing={2} mt={2}>
{getToolsByCategory()
.find(({ type }) => type === categoryName)
?.tools?.map((tool) => (
?.tools?.map((tool, index) => (
<Grid item xs={12} md={6} lg={4} key={tool.path}>
<Stack
sx={{
backgroundColor: 'white',
boxShadow: '5px 4px 2px #E9E9ED',
cursor: 'pointer',
'&:hover': {
backgroundColor: theme.palette.background.default // Change this to your desired hover color
@@ -45,10 +48,14 @@ export default function Home() {
direction={'row'}
spacing={2}
padding={2}
border={1}
border={`1px solid ${theme.palette.background.default}`}
borderRadius={2}
>
<img width={100} src={tool.image ?? toolsPng} />
<Icon
icon={tool.icon ?? 'ph:compass-tool-thin'}
fontSize={'100px'}
color={categoriesColors[index % categoriesColors.length]}
/>
<Box>
<Link to={'/' + tool.path}>{tool.name}</Link>
<Typography sx={{ mt: 2 }}>

3
src/pages/tools/image/png/change-colors-in-png/meta.ts
View File

@@ -1,11 +1,10 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
import image from '@assets/image.png';
export const tool = defineTool('png', {
name: 'Change colors in png',
path: 'change-colors-in-png',
image,
icon: 'cil:color-fill',
description:
"World's simplest online Portable Network Graphics (PNG) color changer. Just import your PNG image in the editor on the left, select which colors to change, and you'll instantly get a new PNG with the new colors on the right. Free, quick, and very powerful. Import a PNG – replace its colors.",
shortDescription: 'Quickly swap colors in a PNG image',

2
src/pages/tools/image/png/compress-png/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('png', {
name: 'Compress png',
path: 'compress-png',
// image,
icon: 'material-symbols-light:compress',
description:
'This is a program that compresses PNG pictures. As soon as you paste your PNG picture in the input area, the program will compress it and show the result in the output area. In the options, you can adjust the compression level, as well as find the old and new picture file sizes.',
shortDescription: 'Quicly compress a PNG',

3
src/pages/tools/image/png/convert-jgp-to-png/meta.ts
View File

@@ -1,11 +1,10 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
import image from '@assets/image.png';
export const tool = defineTool('png', {
name: 'Convert JPG to PNG',
path: 'convert-jgp-to-png',
image,
icon: 'ph:file-jpg-thin',
description:
'Quickly convert your JPG images to PNG. Just import your PNG image in the editor on the left',
shortDescription: 'Quickly convert your JPG images to PNG',

3
src/pages/tools/image/png/create-transparent/meta.ts
View File

@@ -1,11 +1,10 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
import image from '@assets/image.png';
export const tool = defineTool('png', {
name: 'Create transparent PNG',
path: 'create-transparent',
image,
icon: 'mdi:circle-transparent',
shortDescription: 'Quickly make a PNG image transparent',
description:
"World's simplest online Portable Network Graphics transparency maker. Just import your PNG image in the editor on the left and you will instantly get a transparent PNG on the right. Free, quick, and very powerful. Import a PNG – get a transparent PNG.",

2
src/pages/tools/list/find-most-popular/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Find most popular',
path: 'find-most-popular',
// image,
icon: 'material-symbols-light:query-stats',
description: '',
shortDescription: '',
keywords: ['find', 'most', 'popular'],

2
src/pages/tools/list/find-unique/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Find unique',
path: 'find-unique',
// image,
icon: 'mynaui:one',
description: '',
shortDescription: '',
keywords: ['find', 'unique'],

2
src/pages/tools/list/group/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Group',
path: 'group',
// image,
icon: 'pajamas:group',
description: '',
shortDescription: '',
keywords: ['group'],

2
src/pages/tools/list/reverse/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Reverse',
path: 'reverse',
// image,
icon: 'proicons:reverse',
description: '',
shortDescription: '',
keywords: ['reverse'],

2
src/pages/tools/list/rotate/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Rotate',
path: 'rotate',
// image,
icon: 'material-symbols-light:rotate-right',
description: '',
shortDescription: '',
keywords: ['rotate'],

2
src/pages/tools/list/shuffle/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Shuffle',
path: 'shuffle',
// image,
icon: 'material-symbols-light:shuffle',
description: '',
shortDescription: '',
keywords: ['shuffle'],

2
src/pages/tools/list/sort/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Sort',
path: 'sort',
// image,
icon: 'basil:sort-outline',
description:
'This is a super simple browser-based application that sorts items in a list and arranges them in increasing or decreasing order. You can sort the items alphabetically, numerically, or by their length. You can also remove duplicate and empty items, as well as trim individual items that have whitespace around them. You can use any separator character to separate the input list items or alternatively use a regular expression to separate them. Additionally, you can create a new delimiter for the sorted output list.',
shortDescription: 'Quickly sort a list',

2
src/pages/tools/list/unwrap/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Unwrap',
path: 'unwrap',
// image,
icon: 'mdi:unwrap',
description: '',
shortDescription: '',
keywords: ['unwrap'],

2
src/pages/tools/number/generate/meta.ts
View File

@@ -6,7 +6,7 @@ export const tool = defineTool('number', {
name: 'Generate numbers',
path: 'generate',
shortDescription: 'Quickly calculate a list of integers in your browser',
// image,
icon: 'lsicon:number-filled',
description:
'Quickly calculate a list of integers in your browser. To get your list, just specify the first integer, change value and total count in the options below, and this utility will generate that many integers',
keywords: ['generate'],

2
src/pages/tools/number/sum/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('number', {
name: 'Number Sum Calculator',
path: 'sum',
// image,
icon: 'fluent:autosum-20-regular',
description:
'Quickly calculate the sum of numbers in your browser. To get your sum, just enter your list of numbers in the input field, adjust the separator between the numbers in the options below, and this utility will add up all these numbers.',
shortDescription: 'Quickly sum numbers',

3
src/pages/tools/string/join/meta.ts
View File

@@ -1,11 +1,10 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
import image from '@assets/text.png';
export const tool = defineTool('string', {
path: 'join',
name: 'Text Joiner',
image,
icon: 'tabler:arrows-join',
description:
"World's Simplest Text Tool World's simplest browser-based utility for joining text. Load your text in the input form on the left and you'll automatically get merged text on the right. Powerful, free, and fast. Load text – get joined lines",
shortDescription: 'Quickly merge texts',

2
src/pages/tools/string/split/meta.ts
View File

@@ -5,7 +5,7 @@ import image from '@assets/text.png';
export const tool = defineTool('string', {
path: 'split',
name: 'Text splitter',
image,
icon: 'material-symbols-light:arrow-split',
description:
"World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.",
shortDescription: 'Quickly split a text',

2
src/pages/tools/string/to-morse/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'String To morse',
path: 'to-morse',
// image,
icon: 'arcticons:morse',
description:
"World's simplest browser-based utility for converting text to Morse code. Load your text in the input form on the left and you'll instantly get Morse code in the output area. Powerful, free, and fast. Load text – get Morse code.",
shortDescription: 'Quickly encode text to morse',

2
src/pages/tools/video/gif/change-speed/meta.ts
View File

@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('gif', {
name: 'Change speed',
path: 'change-speed',
// image,
icon: 'material-symbols-light:speed-outline',
description:
'This online utility lets you change the speed of a GIF animation. You can speed it up or slow it down. You can set the same constant delay between all frames or change the delays of individual frames. You can also play both the input and output GIFs at the same time and compare their speeds',
shortDescription: 'Quickly change GIF speed',

11
src/tools/defineTool.tsx
View File

@@ -1,11 +1,12 @@
import ToolLayout from '../components/ToolLayout';
import React, { JSXElementConstructor, LazyExoticComponent } from 'react';
import { IconifyIcon } from '@iconify/react';
interface ToolOptions {
path: string;
component: LazyExoticComponent<JSXElementConstructor<NonNullable<unknown>>>;
keywords: string[];
image?: string;
icon?: IconifyIcon | string;
name: string;
description: string;
shortDescription: string;
@@ -19,7 +20,7 @@ export interface DefinedTool {
name: string;
description: string;
shortDescription: string;
image?: string;
icon?: IconifyIcon | string;
keywords: string[];
component: () => JSX.Element;
}
@@ -29,7 +30,7 @@ export const defineTool = (
options: ToolOptions
): DefinedTool => {
const {
image,
icon,
path,
name,
description,
@@ -42,7 +43,7 @@ export const defineTool = (
type: basePath,
path: `${basePath}/${path}`,
name,
image,
icon,
description,
shortDescription,
keywords,
@@ -51,7 +52,7 @@ export const defineTool = (
<ToolLayout
title={name}
description={description}
image={image}
icon={icon}
type={basePath}
>
<Component />