style: optimizations

This commit is contained in:
Ibrahima G. Coulibaly
2025-03-02 17:28:45 +00:00
parent c570368f5d
commit 90b8927f72
6 changed files with 139 additions and 99 deletions

141
.idea/workspace.xml generated
View File

@@ -4,16 +4,13 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: remove duplicate lines"> <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: tsc">
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/duplicate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/duplicate/meta.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/truncate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/truncate/meta.ts" 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/pages/tools/list/wrap/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/wrap/meta.ts" 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/pages/tools/string/create-palindrome/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/create-palindrome/meta.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/allTools/AllTools.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/allTools/AllTools.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/extract-substring/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/extract-substring/meta.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/palindrome/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/palindrome/meta.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/randomize-case/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/randomize-case/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/reverse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/reverse/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/uppercase/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/uppercase/meta.ts" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -36,8 +33,12 @@
<option name="RESET_MODE" value="HARD" /> <option name="RESET_MODE" value="HARD" />
</component> </component>
<component name="GitHubPullRequestSearchHistory">{ <component name="GitHubPullRequestSearchHistory">{
&quot;history&quot;: [
{
&quot;assignee&quot;: &quot;iib0011&quot;
}
],
&quot;lastFilter&quot;: { &quot;lastFilter&quot;: {
&quot;state&quot;: &quot;OPEN&quot;,
&quot;assignee&quot;: &quot;iib0011&quot; &quot;assignee&quot;: &quot;iib0011&quot;
} }
}</component> }</component>
@@ -65,51 +66,51 @@
<option name="hideEmptyMiddlePackages" value="true" /> <option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" /> <option name="showLibraryContents" value="true" />
</component> </component>
<component name="PropertiesComponent"><![CDATA[{ <component name="PropertiesComponent">{
"keyToString": { &quot;keyToString&quot;: {
"ASKED_ADD_EXTERNAL_FILES": "true", &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
"ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true", &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
"Docker.Dockerfile build.executor": "Run", &quot;Docker.Dockerfile build.executor&quot;: &quot;Run&quot;,
"Docker.Dockerfile.executor": "Run", &quot;Docker.Dockerfile.executor&quot;: &quot;Run&quot;,
"Playwright.JoinText Component.executor": "Run", &quot;Playwright.JoinText Component.executor&quot;: &quot;Run&quot;,
"Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run", &quot;Playwright.JoinText Component.should merge text pieces with specified join character.executor&quot;: &quot;Run&quot;,
"RunOnceActivity.OpenProjectViewOnStart": "true", &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
"RunOnceActivity.ShowReadmeOnStart": "true", &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
"RunOnceActivity.git.unshallow": "true", &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
"Vitest.compute function (1).executor": "Run", &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
"Vitest.compute function.executor": "Run", &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
"Vitest.mergeText.executor": "Run", &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
"Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run", &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
"Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run", &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
"Vitest.removeDuplicateLines function.executor": "Run", &quot;Vitest.removeDuplicateLines function.executor&quot;: &quot;Run&quot;,
"Vitest.removeDuplicateLines function.newlines option.executor": "Run", &quot;Vitest.removeDuplicateLines function.newlines option.executor&quot;: &quot;Run&quot;,
"Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run", &quot;Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor&quot;: &quot;Run&quot;,
"git-widget-placeholder": "main", &quot;git-widget-placeholder&quot;: &quot;main&quot;,
"ignore.virus.scanning.warn.message": "true", &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
"kotlin-language-version-configured": "true", &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
"last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/public/assets", &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/public/assets&quot;,
"node.js.detected.package.eslint": "true", &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
"node.js.detected.package.tslint": "true", &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
"node.js.selected.package.eslint": "(autodetect)", &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
"node.js.selected.package.tslint": "(autodetect)", &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
"nodejs_package_manager_path": "npm", &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
"npm.build.executor": "Run", &quot;npm.build.executor&quot;: &quot;Run&quot;,
"npm.dev.executor": "Run", &quot;npm.dev.executor&quot;: &quot;Run&quot;,
"npm.lint.executor": "Run", &quot;npm.lint.executor&quot;: &quot;Run&quot;,
"npm.prebuild.executor": "Run", &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
"npm.script:create:tool.executor": "Run", &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
"npm.test.executor": "Run", &quot;npm.test.executor&quot;: &quot;Run&quot;,
"npm.test:e2e.executor": "Run", &quot;npm.test:e2e.executor&quot;: &quot;Run&quot;,
"npm.test:e2e:run.executor": "Run", &quot;npm.test:e2e:run.executor&quot;: &quot;Run&quot;,
"prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier", &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
"project.structure.last.edited": "Problems", &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
"project.structure.proportion": "0.0", &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
"project.structure.side.proportion": "0.2", &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
"settings.editor.selected.configurable": "settings.typescriptcompiler", &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
"ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib", &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
"vue.rearranger.settings.migration": "true" &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
} }
}]]></component> }</component>
<component name="ReactDesignerToolWindowState"> <component name="ReactDesignerToolWindowState">
<option name="myId2Visible"> <option name="myId2Visible">
<map> <map>
@@ -135,7 +136,7 @@
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" /> <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
</key> </key>
</component> </component>
<component name="RunManager" selected="Vitest.removeDuplicateLines function"> <component name="RunManager" selected="npm.dev">
<configuration name="removeDuplicateLines function" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true"> <configuration name="removeDuplicateLines function" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
<node-interpreter value="project" /> <node-interpreter value="project" />
<vitest-package value="$PROJECT_DIR$/node_modules/vitest" /> <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
@@ -213,10 +214,10 @@
</list> </list>
<recent_temporary> <recent_temporary>
<list> <list>
<item itemvalue="npm.dev" />
<item itemvalue="Vitest.removeDuplicateLines function" /> <item itemvalue="Vitest.removeDuplicateLines function" />
<item itemvalue="Vitest.removeDuplicateLines function.newlines option" /> <item itemvalue="Vitest.removeDuplicateLines function.newlines option" />
<item itemvalue="Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter" /> <item itemvalue="Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter" />
<item itemvalue="npm.dev" />
<item itemvalue="npm.build" /> <item itemvalue="npm.build" />
</list> </list>
</recent_temporary> </recent_temporary>
@@ -291,15 +292,9 @@
<workItem from="1740702343843" duration="657000" /> <workItem from="1740702343843" duration="657000" />
<workItem from="1740788381920" duration="465000" /> <workItem from="1740788381920" duration="465000" />
<workItem from="1740788856134" duration="659000" /> <workItem from="1740788856134" duration="659000" />
<workItem from="1740880919391" duration="3993000" /> <workItem from="1740880919391" duration="4395000" />
</task> <workItem from="1740923024259" duration="23000" />
<task id="LOCAL-00090" summary="fix: misc"> <workItem from="1740933006573" duration="3365000" />
<option name="closed" value="true" />
<created>1720558690146</created>
<option name="number" value="00090" />
<option name="presentableId" value="LOCAL-00090" />
<option name="project" value="LOCAL" />
<updated>1720558690147</updated>
</task> </task>
<task id="LOCAL-00091" summary="fix: style"> <task id="LOCAL-00091" summary="fix: style">
<option name="closed" value="true" /> <option name="closed" value="true" />
@@ -685,7 +680,15 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1740884332735</updated> <updated>1740884332735</updated>
</task> </task>
<option name="localTasksCounter" value="139" /> <task id="LOCAL-00139" summary="fix: tsc">
<option name="closed" value="true" />
<created>1740884971377</created>
<option name="number" value="00139" />
<option name="presentableId" value="LOCAL-00139" />
<option name="project" value="LOCAL" />
<updated>1740884971378</updated>
</task>
<option name="localTasksCounter" value="140" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@@ -748,7 +751,6 @@
<MESSAGE value="fix: docs" /> <MESSAGE value="fix: docs" />
<MESSAGE value="feat: funding" /> <MESSAGE value="feat: funding" />
<MESSAGE value="feat: ui changes" /> <MESSAGE value="feat: ui changes" />
<MESSAGE value="fix: tsc" />
<MESSAGE value="fix: readme" /> <MESSAGE value="fix: readme" />
<MESSAGE value="fix: broken links" /> <MESSAGE value="fix: broken links" />
<MESSAGE value="chore: style buttons" /> <MESSAGE value="chore: style buttons" />
@@ -769,7 +771,8 @@
<MESSAGE value="chore: img" /> <MESSAGE value="chore: img" />
<MESSAGE value="docs: readme" /> <MESSAGE value="docs: readme" />
<MESSAGE value="feat: remove duplicate lines" /> <MESSAGE value="feat: remove duplicate lines" />
<option name="LAST_COMMIT_MESSAGE" value="feat: remove duplicate lines" /> <MESSAGE value="fix: tsc" />
<option name="LAST_COMMIT_MESSAGE" value="fix: tsc" />
</component> </component>
<component name="XSLT-Support.FileAssociations.UIState"> <component name="XSLT-Support.FileAssociations.UIState">
<expand /> <expand />

View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { ReactNode, useState } from 'react';
import AppBar from '@mui/material/AppBar'; import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar'; import Toolbar from '@mui/material/Toolbar';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
@@ -9,12 +9,14 @@ import logo from 'assets/logo.png';
import { import {
Drawer, Drawer,
List, List,
ListItem,
ListItemButton, ListItemButton,
ListItemText, ListItemText,
Stack Stack
} from '@mui/material'; } from '@mui/material';
import useMediaQuery from '@mui/material/useMediaQuery'; import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import { Icon } from '@iconify/react';
const Navbar: React.FC = () => { const Navbar: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -28,22 +30,51 @@ const Navbar: React.FC = () => {
// { label: 'Features', path: '/features' } // { label: 'Features', path: '/features' }
// { label: 'About Us', path: '/about-us' } // { label: 'About Us', path: '/about-us' }
]; ];
const buttons: ReactNode[] = [
<Icon
onClick={() => window.open('https://discord.gg/SDbbn3hT4b', '_blank')}
style={{ cursor: 'pointer' }}
fontSize={30}
icon={'ic:baseline-discord'}
/>,
<iframe
src="https://ghbtns.com/github-btn.html?user=iib0011&repo=omni-tools&type=star&count=true&size=large"
frameBorder="0"
scrolling="0"
width="130"
height="30"
title="GitHub"
></iframe>,
<Button
onClick={() => {
window.open('https://buymeacoffee.com/iib0011', '_blank');
}}
sx={{ borderRadius: '100px' }}
variant={'contained'}
startIcon={
<Icon
style={{ cursor: 'pointer' }}
fontSize={25}
icon={'mdi:heart-outline'}
/>
}
>
Buy me a coffee
</Button>
];
const drawerList = ( const drawerList = (
<List> <List>
{navItems.map((navItem) => ( {navItems.map((navItem) => (
<ListItemButton onClick={() => navigate(navItem.path)}> <ListItemButton
key={navItem.path}
onClick={() => navigate(navItem.path)}
>
<ListItemText primary={navItem.label} /> <ListItemText primary={navItem.label} />
</ListItemButton> </ListItemButton>
))} ))}
<iframe {buttons.map((button) => (
src="https://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=star&count=true&size=large" <ListItem>{button}</ListItem>
frameBorder="0" ))}
scrolling="0"
width="170"
height="30"
title="GitHub"
></iframe>
</List> </List>
); );
@@ -51,15 +82,14 @@ const Navbar: React.FC = () => {
<AppBar <AppBar
position="static" position="static"
style={{ style={{
backgroundColor: 'white', backgroundColor: '#F5F5FA',
color: 'black' color: 'black'
}} }}
> >
<Toolbar <Toolbar
sx={{ sx={{
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center'
boxShadow: '0px 2px 2px #C8C9CE'
}} }}
> >
<img <img
@@ -90,7 +120,7 @@ const Navbar: React.FC = () => {
</Drawer> </Drawer>
</> </>
) : ( ) : (
<Stack direction={'row'} spacing={2}> <Stack direction={'row'} spacing={3} alignItems={'center'}>
{navItems.map((item) => ( {navItems.map((item) => (
<Button <Button
key={item.label} key={item.label}
@@ -111,14 +141,7 @@ const Navbar: React.FC = () => {
</Link> </Link>
</Button> </Button>
))} ))}
<iframe {buttons}
src="https://ghbtns.com/github-btn.html?user=iib0011&repo=omni-tools&type=star&count=true&size=large"
frameBorder="0"
scrolling="0"
width="170"
height="30"
title="GitHub"
></iframe>
</Stack> </Stack>
)} )}
</Toolbar> </Toolbar>

View File

@@ -28,7 +28,8 @@ export default function ToolLayout({
.map((tool) => ({ .map((tool) => ({
title: tool.name, title: tool.name,
description: tool.shortDescription, description: tool.shortDescription,
link: '/' + tool.path link: '/' + tool.path,
icon: tool.icon
})) ?? []; })) ?? [];
return ( return (

View File

@@ -1,10 +1,12 @@
import { Box, Grid, Stack, Typography } from '@mui/material'; import { Box, Grid, Stack, Typography } from '@mui/material';
import ToolCard from './ToolCard'; import ToolCard from './ToolCard';
import { IconifyIcon } from '@iconify/react';
export interface ToolCardProps { export interface ToolCardProps {
title: string; title: string;
description: string; description: string;
link: string; link: string;
icon: IconifyIcon | string;
} }
interface AllToolsProps { interface AllToolsProps {
@@ -26,6 +28,7 @@ export default function AllTools({ title, toolCards }: AllToolsProps) {
title={card.title} title={card.title}
description={card.description} description={card.description}
link={card.link} link={card.link}
icon={card.icon}
/> />
</Grid> </Grid>
))} ))}

View File

@@ -1,9 +1,15 @@
import { Box, Card, CardContent, Link, Typography } from '@mui/material'; import { Box, Card, CardContent, Link, Stack, Typography } from '@mui/material';
import { ToolCardProps } from './AllTools'; import { ToolCardProps } from './AllTools';
import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Icon } from '@iconify/react';
export default function ToolCard({ title, description, link }: ToolCardProps) { export default function ToolCard({
title,
description,
link,
icon
}: ToolCardProps) {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<Card <Card
@@ -28,9 +34,12 @@ export default function ToolCard({ title, description, link }: ToolCardProps) {
borderColor: '#ffffff70' borderColor: '#ffffff70'
}} }}
> >
<Stack direction={'row'} spacing={2} alignItems={'center'}>
<Icon icon={icon} fontSize={25} />
<Typography variant="h5" component="h2"> <Typography variant="h5" component="h2">
{title} {title}
</Typography> </Typography>
</Stack>
<Link href={link} underline="none" sx={{ color: '#fff' }}> <Link href={link} underline="none" sx={{ color: '#fff' }}>
<ChevronRightIcon /> <ChevronRightIcon />
</Link> </Link>

View File

@@ -96,7 +96,8 @@ export default function ToolOptions<T extends FormikValues>({
mb: 2, mb: 2,
borderRadius: 2, borderRadius: 2,
padding: 2, padding: 2,
backgroundColor: theme.palette.background.default backgroundColor: theme.palette.background.default,
boxShadow: '2'
}} }}
mt={2} mt={2}
> >