add removing newLine

.vscode/settings.json

@@ -40,5 +40,8 @@
     "yaml",
     "toml",
     "astro",
+  ],
+  "cSpell.words": [
+    "antfu"
   ]
 }

eslint.config.mjs

@@ -3,4 +3,7 @@ import antfu from '@antfu/eslint-config'
 export default antfu({
   formatters: true,
   react: true,
+  stylistic: {
+    semi: true,
+  },
 })

src/App.tsx

@@ -3,6 +3,7 @@ import { Container } from '@mui/material'
 import { FunctionFrame } from 'components/atomic/FunctionFrame'
 import { Comparsion } from 'components/organisms/Comparsion'
 import { FullHalfConvert } from 'components/organisms/FullHalfConvert'
+import { RemoveNewLine } from 'components/organisms/RemoveNewLine'
 
 export const App: FC = () => {
   return (
@@ -13,6 +14,9 @@ export const App: FC = () => {
       <FunctionFrame>
         <Comparsion />
       </FunctionFrame>
+      <FunctionFrame>
+        <RemoveNewLine />
+      </FunctionFrame>
       <a
         target="_blank"
         href="https://icons8.com/icon/IXoJG4Gjzs5g/change"

src/components/organisms/RemoveNewLine.tsx

@@ -0,0 +1,43 @@
+import { Box, Button, TextField } from '@mui/material';
+import { TextBox } from 'components/atomic/TextBox';
+import { type FC, useState } from 'react';
+
+export const RemoveNewLine: FC = () => {
+  const [inputValue, setInputValue] = useState('');
+  const [removedValue, setRemovedValue] = useState('');
+
+  const handleClick = () => {
+    const result = inputValue.replace(/\r?\n|\r/g, '');
+    setRemovedValue(result);
+  };
+
+  return (
+    <>
+      <Box sx={{ fontSize: '2rem', marginBottom: '1ch' }}>全角半角変換</Box>
+      <TextBox
+        labelText="変換前のテキストを入力"
+        handleChange={(e) => {
+          setInputValue(e.target.value);
+        }}
+      />
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-around',
+          margin: '1ch 0',
+        }}
+      >
+        <Button variant="contained" onClick={handleClick}>
+          改行を取り除く
+        </Button>
+      </Box>
+      <TextField
+        label="変換後のテキスト"
+        value={removedValue}
+        fullWidth
+        margin="normal"
+        spellCheck={false}
+      />
+    </>
+  );
+};