Add information, examples, and all tools sections

src/components/allTools/AllTools.tsx

@@ -0,0 +1,36 @@
+import { Box, Grid, Stack, Typography } from '@mui/material';
+import ToolCard from './ToolCard';
+
+export interface ToolCardProps {
+  title: string;
+  description: string;
+  link: string;
+}
+
+interface AllToolsProps {
+  title: string;
+  toolCards: ToolCardProps[];
+}
+
+export default function AllTools({ title, toolCards }: AllToolsProps) {
+  return (
+    <Box mt={4} mb={10}>
+      <Typography mb={2} fontSize={30} color={'primary'}>
+        {title}
+      </Typography>
+      <Stack direction={'row'} alignItems={'center'} spacing={2}>
+        <Grid container spacing={2}>
+          {toolCards.map((card) => (
+            <Grid item xs={4} key={card.title}>
+              <ToolCard
+                title={card.title}
+                description={card.description}
+                link={card.link}
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </Stack>
+    </Box>
+  );
+}

src/components/allTools/ToolCard.tsx

@@ -0,0 +1,40 @@
+import { Box, Link, Card, CardContent, Typography } from '@mui/material';
+import { ToolCardProps } from './AllTools';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+
+export default function ToolCard({ title, description, link }: ToolCardProps) {
+  return (
+    <Card
+      raised
+      sx={{
+        borderRadius: 2,
+        bgcolor: '#5581b5',
+        borderColor: '#5581b5',
+        color: '#fff',
+        boxShadow: '6px 6px 12px #b8b9be, -6px -6px 12px #fff'
+      }}
+    >
+      <CardContent>
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          sx={{
+            paddingBottom: 1,
+            borderBottomWidth: 1,
+            borderColor: '#ffffff70'
+          }}
+        >
+          <Typography variant="h5" component="h2">
+            {title}
+          </Typography>
+          <Link href={link} underline="none" sx={{ color: '#fff' }}>
+            <ChevronRightIcon />
+          </Link>
+        </Box>
+        <Typography variant="body2" mt={2} color="#fff">
+          {description}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}

src/components/examples/ExampleCard.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { ExampleCardProps } from './Examples';
+import {
+  Box,
+  Stack,
+  Card,
+  CardContent,
+  Typography,
+  TextField
+} from '@mui/material';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import RequiredOptions from './RequiredOptions';
+
+export default function ExampleCard({
+  title,
+  description,
+  sampleText,
+  sampleResult,
+  requiredOptions
+}: ExampleCardProps) {
+  const handleSampleTextClick = () => {
+    console.log('TextField clicked');
+  };
+
+  const handleSampleResultClick = () => {
+    console.log('TextField clicked');
+  };
+
+  return (
+    <Card
+      raised
+      sx={{
+        bgcolor: '#d1d9e6',
+        height: '100%',
+        overflow: 'hidden',
+        borderRadius: 2,
+        transition: 'background-color 0.3s ease',
+        '&:hover': {
+          boxShadow: '12px 9px 11px 2px #b8b9be, -6px -6px 12px #fff'
+        }
+      }}
+    >
+      <CardContent>
+        <Box display="flex" justifyContent="space-between" borderRadius="5px">
+          <Typography variant="h5" component="h2">
+            {title}
+          </Typography>
+        </Box>
+        <Stack direction={'column'} alignItems={'center'} spacing={2}>
+          <Typography variant="body2" color="text.secondary">
+            {description}
+          </Typography>
+          <Box
+            display="flex"
+            onClick={handleSampleTextClick}
+            sx={{
+              width: '100%',
+              padding: '5px 10px',
+              borderRadius: '5px',
+              boxShadow: 'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
+            }}
+          >
+            <TextField
+              value={sampleText}
+              disabled
+              fullWidth
+              multiline
+              sx={{
+                '& .MuiOutlinedInput-root': {
+                  '& fieldset': {
+                    border: 'none'
+                  }
+                }
+              }}
+            />
+          </Box>
+          <ArrowDownwardIcon />
+          <Box
+            display="flex"
+            onClick={handleSampleResultClick}
+            sx={{
+              width: '100%',
+              padding: '5px 10px',
+              borderRadius: '5px',
+              boxShadow: 'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
+            }}
+          >
+            <TextField
+              value={sampleResult}
+              disabled
+              fullWidth
+              multiline
+              sx={{
+                '& .MuiOutlinedInput-root': {
+                  '& fieldset': {
+                    border: 'none'
+                  }
+                }
+              }}
+            />
+          </Box>
+
+          <RequiredOptions options={requiredOptions} />
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}

src/components/examples/Examples.tsx

@@ -0,0 +1,57 @@
+import { Box, Grid, Stack, Typography } from '@mui/material';
+import ExampleCard from './ExampleCard';
+
+export interface ExampleCardProps {
+  title: string;
+  description: string;
+  sampleText: string;
+  sampleResult: string;
+  requiredOptions: RequiredOptionsProps;
+}
+
+export interface RequiredOptionsProps {
+  joinCharacter: string;
+  deleteBlankLines: boolean;
+  deleteTrailingSpaces: boolean;
+}
+
+interface ExampleProps {
+  title: string;
+  subtitle: string;
+  exampleCards: ExampleCardProps[];
+}
+
+export default function Examples({
+  title,
+  subtitle,
+  exampleCards
+}: ExampleProps) {
+  return (
+    <Box mt={4}>
+      <Box mt={4} display="flex" gap={1} alignItems="center">
+        <Typography mb={2} fontSize={30} color={'primary'}>
+          {title}
+        </Typography>
+        <Typography mb={2} fontSize={30} color={'secondary'}>
+          {subtitle}
+        </Typography>
+      </Box>
+
+      <Stack direction={'row'} alignItems={'center'} spacing={2}>
+        <Grid container spacing={2}>
+          {exampleCards.map((card) => (
+            <Grid item xs={4} key={card.title}>
+              <ExampleCard
+                title={card.title}
+                description={card.description}
+                sampleText={card.sampleText}
+                sampleResult={card.sampleResult}
+                requiredOptions={card.requiredOptions}
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </Stack>
+    </Box>
+  );
+}

src/components/examples/RequiredOptions.tsx

@@ -0,0 +1,80 @@
+import { Box, Stack, TextField, Typography } from '@mui/material';
+import { RequiredOptionsProps } from '../../../components/examples/Examples';
+import CheckboxWithDesc from 'components/options/CheckboxWithDesc';
+
+export default function RequiredOptions({
+  options
+}: {
+  options: RequiredOptionsProps;
+}) {
+  const { joinCharacter, deleteBlankLines, deleteTrailingSpaces } = options;
+
+  const handleBoxClick = () => {
+    const toolsElement = document.getElementById('tool');
+    if (toolsElement) {
+      toolsElement.scrollIntoView({ behavior: 'smooth' });
+    }
+    console.log('tool clicked');
+  };
+
+  return (
+    <Stack direction={'column'} alignItems={'left'} spacing={2}>
+      <Typography variant="h5" component="h3" sx={{ marginTop: '5px' }}>
+        Required options
+      </Typography>
+      <Typography variant="body2" component="p">
+        These options will be used automatically if you select this example.
+      </Typography>
+
+      <Box
+        display="flex"
+        onClick={handleBoxClick}
+        sx={{
+          zIndex: '2',
+          cursor: 'pointer',
+          bgcolor: 'transparent',
+          width: '100%',
+          height: '100%',
+          display: 'flex'
+        }}
+      >
+        <TextField
+          disabled
+          value={joinCharacter}
+          fullWidth
+          rows={1}
+          sx={{
+            '& .MuiOutlinedInput-root': {
+              zIndex: '-1'
+            }
+          }}
+        />
+      </Box>
+
+      {deleteBlankLines ? (
+        <Box onClick={handleBoxClick}>
+          <CheckboxWithDesc
+            title="Delete Blank Lines"
+            checked={deleteBlankLines}
+            onChange={() => {}}
+            description="Delete lines that don't have text symbols."
+          />
+        </Box>
+      ) : (
+        ''
+      )}
+      {deleteTrailingSpaces ? (
+        <Box onClick={handleBoxClick}>
+          <CheckboxWithDesc
+            title="Delete Training Spaces"
+            checked={deleteTrailingSpaces}
+            onChange={() => {}}
+            description="Remove spaces and tabs at the end of the lines."
+          />
+        </Box>
+      ) : (
+        ''
+      )}
+    </Stack>
+  );
+}

src/components/options/CheckboxWithDesc.tsx

@@ -5,12 +5,14 @@ const CheckboxWithDesc = ({
   title,
   description,
   checked,
-  onChange
+  onChange,
+  disabled
 }: {
   title: string;
   description: string;
   checked: boolean;
   onChange: (value: boolean) => void;
+  disabled?: boolean;
 }) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange(event.target.checked);
@@ -20,7 +22,12 @@ const CheckboxWithDesc = ({
     <Box>
       <FormControlLabel
         control={
-          <Checkbox defaultChecked checked={checked} onChange={handleChange} />
+          <Checkbox
+            defaultChecked
+            checked={checked}
+            onChange={handleChange}
+            disabled={disabled}
+          />
         }
         label={title}
       />