feat: make SettingItem clickable (#1138)

* feat: make `SettingItem` clickable

* clean up

src/components/setting/mods/setting-comp.tsx

@@ -3,32 +3,39 @@ import {
   Box,
   List,
   ListItem,
+  ListItemButton,
   ListItemText,
   ListSubheader,
 } from "@mui/material";
+import { ChevronRightRounded } from "@mui/icons-material";
 
 interface ItemProps {
   label: ReactNode;
   extra?: ReactNode;
   children?: ReactNode;
   secondary?: ReactNode;
+  onClick?: () => void;
 }
 
 export const SettingItem: React.FC<ItemProps> = (props) => {
-  const { label, extra, children, secondary } = props;
+  const { label, extra, children, secondary, onClick } = props;
+  const clickable = !!onClick;
 
-  const primary = !extra ? (
+  const primary = (
     <Box sx={{ display: "flex", alignItems: "center", fontSize: "14px" }}>
       <span>{label}</span>
-    </Box>
-  ) : (
-    <Box sx={{ display: "flex", alignItems: "center", fontSize: "14px" }}>
-      <span>{label}</span>
-      {extra}
+      {extra ? extra : null}
     </Box>
   );
 
-  return (
+  return clickable ? (
+    <ListItem disablePadding>
+      <ListItemButton onClick={onClick}>
+        <ListItemText primary={primary} secondary={secondary} />
+        <ChevronRightRounded />
+      </ListItemButton>
+    </ListItem>
+  ) : (
     <ListItem sx={{ pt: "5px", pb: "5px" }}>
       <ListItemText primary={primary} secondary={secondary} />
       {children}