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>