feat: sort list

src/components/options/SelectWithDesc.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Box,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Typography
+} from '@mui/material';
+
+interface Option<T extends string | boolean> {
+  label: string;
+  value: T;
+}
+
+const SelectWithDesc = <T extends string | boolean>({
+  selected,
+  options,
+  onChange,
+  description
+}: {
+  selected: T;
+  options: Option<T>[];
+  onChange: (value: T) => void;
+  description: string;
+}) => {
+  const handleChange = (event: SelectChangeEvent<T>) => {
+    onChange(event.target.value as T);
+  };
+
+  return (
+    <Box>
+      <Select value={selected} onChange={handleChange}>
+        {options.map((option) => (
+          <MenuItem key={option.label} value={option.value.toString()}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+      <Typography fontSize={12} mt={1}>
+        {description}
+      </Typography>
+    </Box>
+  );
+};
+
+export default SelectWithDesc;

src/components/options/ToolOptionGroups.tsx

@@ -15,7 +15,7 @@ export default function ToolOptionGroups({
   return (
     <Grid container spacing={2}>
       {groups.map((group) => (
-        <Grid item xs={12} md={6} key={group.title}>
+        <Grid item xs={12} md={4} key={group.title}>
           <Typography mb={1} fontSize={22}>
             {group.title}
           </Typography>

src/pages/list/index.ts

@@ -9,4 +9,15 @@ import { tool as listTruncate } from './truncate/meta';
 import { tool as listShuffle } from './shuffle/meta';
 import { tool as listSort } from './sort/meta';
 
-export const listTools = [listSort];
+export const listTools = [
+  listSort,
+  listUnwrap,
+  listReverse,
+  listFindUnique,
+  listFindMostPopular,
+  listGroup,
+  listWrap,
+  listRotate,
+  listShuffle,
+  listTruncate
+];

src/pages/list/sort/index.tsx

@@ -8,6 +8,8 @@ import { Sort, SortingMethod, SplitOperatorType } from './service';
 import ToolInputAndResult from '../../../components/ToolInputAndResult';
 import SimpleRadio from '../../../components/options/SimpleRadio';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
+import SelectWithDesc from '../../../components/options/SelectWithDesc';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -105,7 +107,57 @@ export default function SplitText() {
           },
           {
             title: 'Sort method',
-            component: <Box></Box>
+            component: (
+              <Box>
+                <SelectWithDesc
+                  selected={values.sortingMethod}
+                  options={[
+                    { label: 'Sort Alphabetically', value: 'alphabetic' },
+                    { label: 'Sort Numerically', value: 'numeric' },
+                    { label: 'Sort by Length', value: 'length' }
+                  ]}
+                  onChange={(value) => updateField('sortingMethod', value)}
+                  description={'Select a sorting method.'}
+                />
+                <SelectWithDesc
+                  selected={values.increasing}
+                  options={[
+                    { label: 'Increasing order', value: true },
+                    { label: 'Decreasing order', value: false }
+                  ]}
+                  onChange={(value) => updateField('increasing', value)}
+                  description={'Select a sorting order.'}
+                />
+                <CheckboxWithDesc
+                  title={'Case Sensitive Sort'}
+                  description={
+                    'Sort uppercase and lowercase items separately. Capital letters precede lowercase letters in an ascending list. (Works only in alphabetical sorting mode.)'
+                  }
+                  checked={values.caseSensitive}
+                  onChange={(val) => updateField('caseSensitive', val)}
+                />
+              </Box>
+            )
+          },
+          {
+            title: 'Sorted item properties',
+            component: (
+              <Box>
+                <TextFieldWithDesc
+                  description={
+                    'Use this symbol as a joiner between items in a sorted list.'
+                  }
+                  value={values.joinSeparator}
+                  onOwnChange={(val) => updateField('joinSeparator', val)}
+                />
+                <CheckboxWithDesc
+                  title={'Remove duplicates'}
+                  description={'Delete duplicate list items.'}
+                  checked={values.removeDuplicated}
+                  onChange={(val) => updateField('removeDuplicated', val)}
+                />
+              </Box>
+            )
           }
         ]}
         initialValues={initialValues}