chore: split string tools ui

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>
+  )
+}