feat: Split string

src/pages/home/index.tsx

@@ -1,21 +1,25 @@
-import {Box, Grid, Icon, Input, Stack, TextField} from "@mui/material";
+import {Box, Icon, Input, Stack, TextField} from "@mui/material";
+import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import SearchIcon from '@mui/icons-material/Search';
+import {useNavigate} from "react-router-dom";
 
+const exampleTools: { label: string; url: string }[] = [{
+  label: 'Create a transparent image',
+  url: ''
+},
+  {label: 'Convert text to morse code', url: ''},
+  {label: 'Change GIF speed', url: ''},
+  {label: 'Pick a random item', url: ''},
+  {label: 'Find and replace text', url: ''},
+  {label: 'Convert emoji to image', url: ''},
+  {label: 'Split a string', url: '/string/split'},
+  {label: 'Calculate number sum', url: ''},
+  {label: 'Pixelate an image', url: ''},
+]
 export default function Home() {
-  const exampleTools: { label: string; url: string }[] = [{
-    label: 'Create a transparent image',
-    url: ''
-  },
-    {label: 'Convert text to morse code', url: ''},
-    {label: 'Change GIF speed', url: ''},
-    {label: 'Pick a random item', url: ''},
-    {label: 'Find and replace text', url: ''},
-    {label: 'Convert emoji to image', url: ''},
-    {label: 'Split a string', url: ''},
-    {label: 'Calculate number sum', url: ''},
-    {label: 'Pixelate an image', url: ''},
-  ]
+  const navigate = useNavigate()
+
   return (<Box padding={5} display={'flex'} flexDirection={'column'} alignItems={'center'} justifyContent={'center'}
                width={'100%'}>
     <Box width={"60%"}>
@@ -38,6 +42,7 @@ export default function Home() {
       <Grid container spacing={1} mt={2}>
         {exampleTools.map((tool) => (
           <Grid
+            onClick={() => navigate(tool.url)}
             item
             xs={4}
             key={tool.label}

src/pages/string/StringConfig.tsx

@@ -0,0 +1,10 @@
+import {RouteObject} from "react-router-dom";
+import {lazy} from "react";
+
+const StringHome = lazy(() => import("./index"));
+const StringSplit = lazy(() => import("./split"));
+
+export const StringConfig: RouteObject[] = [
+  {path: '', element: <StringHome/>},
+  {path: 'split', element: <StringSplit/>},
+]

src/pages/string/index.tsx

@@ -0,0 +1,5 @@
+import {Box} from "@mui/material";
+
+export default function StringHome() {
+  return (<Box></Box>)
+}

src/pages/string/split/index.tsx

@@ -0,0 +1,45 @@
+import ToolHeader from "../../../components/ToolHeader";
+import ToolLayout from "../../../components/ToolLayout";
+import {Box, Stack, TextField} from "@mui/material";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import PublishIcon from '@mui/icons-material/Publish';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import DownloadIcon from '@mui/icons-material/Download';
+import React, {useEffect, useState} from "react";
+
+export default function SplitText() {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('')
+  useEffect(() => {
+    setResult(input.split(' ').join('\n'))
+  }, [input]);
+  return (
+    <ToolLayout>
+      <ToolHeader title={"Text Splitter"}
+                  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."}/>
+
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <Typography fontSize={30} color={'primary'}>Input text</Typography>
+          <TextField value={input} onChange={event => setInput(event.target.value)} fullWidth multiline rows={10}/>
+          <Stack mt={1} direction={'row'} spacing={2}>
+            <Button startIcon={<PublishIcon/>}>Import from file</Button>
+            <Button startIcon={<ContentPasteIcon/>}>Copy to clipboard</Button>
+          </Stack>
+        </Grid>
+        <Grid item xs={6}>
+          <Typography fontSize={30} color={'primary'}>Text pieces</Typography>
+          <TextField value={result} fullWidth multiline rows={10}/>
+          <Stack mt={1} direction={'row'} spacing={2}>
+            <Button startIcon={<DownloadIcon/>}>Save as</Button>
+            <Button startIcon={<ContentPasteIcon/>}>Copy to clipboard</Button>
+          </Stack>
+        </Grid>
+      </Grid>
+      <Box mt={2}>
+
+      </Box>
+    </ToolLayout>)
+}