chore: split string tools ui

src/components/App.tsx

@@ -1,23 +1,22 @@
-import {BrowserRouter, useRoutes} from "react-router-dom";
-import routesConfig from "../config/routesConfig";
-import Navbar from "./Navbar";
-import {Suspense} from "react";
-import Loading from "./Loading";
-import {ThemeProvider} from "@mui/material";
-import theme from "../config/muiConfig";
+import { BrowserRouter, useRoutes } from 'react-router-dom'
+import routesConfig from '../config/routesConfig'
+import Navbar from './Navbar'
+import { Suspense } from 'react'
+import Loading from './Loading'
+import { ThemeProvider } from '@mui/material'
+import theme from '../config/muiConfig'
 
 const AppRoutes = () => {
-  return useRoutes(routesConfig);
-};
+  return useRoutes(routesConfig)
+}
 
 function App() {
-
   return (
     <ThemeProvider theme={theme}>
       <BrowserRouter>
-        <Navbar/>
-        <Suspense fallback={<Loading/>}>
-          <AppRoutes/>
+        <Navbar />
+        <Suspense fallback={<Loading />}>
+          <AppRoutes />
         </Suspense>
       </BrowserRouter>
     </ThemeProvider>

src/components/Loading.tsx

@@ -1,7 +1,7 @@
-import Typography from "@mui/material/Typography";
-import {useState} from "react";
-import Box from "@mui/material/Box";
-import {useTimeout} from "../hooks";
+import Typography from '@mui/material/Typography'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import { useTimeout } from '../hooks'
 
 export type FuseLoadingProps = {
   delay?: number;
@@ -12,12 +12,12 @@ export type FuseLoadingProps = {
  * FuseLoading displays a loading state with an optional delay
  */
 function FuseLoading(props: FuseLoadingProps) {
-  const {delay = 0, className} = props;
-  const [showLoading, setShowLoading] = useState(!delay);
+  const { delay = 0, className } = props
+  const [showLoading, setShowLoading] = useState(!delay)
 
   useTimeout(() => {
-    setShowLoading(true);
-  }, delay);
+    setShowLoading(true)
+  }, delay)
 
   return (
     <div
@@ -26,22 +26,22 @@ function FuseLoading(props: FuseLoadingProps) {
         className="-mb-16 text-13 font-medium sm:text-20"
         color="text.secondary"
       >
-        Chargement
+        Loading
       </Typography>
       <Box
         id="spinner"
         sx={{
-          "& > div": {
-            backgroundColor: "palette.secondary.main",
-          },
+          '& > div': {
+            backgroundColor: 'palette.secondary.main'
+          }
         }}
       >
-        <div className="bounce1"/>
-        <div className="bounce2"/>
-        <div className="bounce3"/>
+        <div className="bounce1" />
+        <div className="bounce2" />
+        <div className="bounce3" />
       </Box>
     </div>
-  );
+  )
 }
 
-export default FuseLoading;
+export default FuseLoading

src/components/input/ToolTextInput.tsx

@@ -0,0 +1,31 @@
+import { Box, Stack, TextField } from '@mui/material'
+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 React from 'react'
+
+export default function ToolTextInput({ value, onChange, title = 'Input text' }: {
+  title?: string;
+  value: string
+  onChange: (value: string) => void
+}) {
+  return (
+    <Box>
+      <Typography fontSize={30} color={'primary'}>
+        {title}
+      </Typography>
+      <TextField
+        value={value}
+        onChange={(event) => onChange(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>
+    </Box>
+  )
+}

src/components/result/ToolTextResult.tsx

@@ -0,0 +1,21 @@
+import Typography from '@mui/material/Typography'
+import { Box, Stack, TextField } from '@mui/material'
+import Button from '@mui/material/Button'
+import DownloadIcon from '@mui/icons-material/Download'
+import ContentPasteIcon from '@mui/icons-material/ContentPaste'
+import React from 'react'
+
+export default function ToolTextResult({ title = 'Result', value }: { title?: string; value: string }) {
+  return (
+    <Box>
+      <Typography fontSize={30} color={'primary'}>
+        {title}
+      </Typography>
+      <TextField value={value} 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>
+    </Box>
+  )
+}