orchetera/template/src/pages/Components/Reusable/ListGenerator.jsx

Welcome to **Orchetera** — your orchestration tool to kickstart Firebase-ready projects with ease!

import React from "react";
import { List, ListItem, ListItemIcon, ListItemText, Box } from "@mui/material";
import PropTypes from "prop-types";

const ListGenerator = ({
  items,
  dense = false,
  divider = true,
  iconPosition = "left",
  textVariant = "body1",
  sx = {},
}) => {
  return (
    <Box sx={sx}>
      <List dense={dense} sx={{ p: 0 }}>
        {items.map((item, index) => (
          <ListItem
            key={item.name || index}
            button={!!item.onClick}
            onClick={item.onClick}
            divider={divider}
            sx={{
              cursor: "pointer",
              px: 3,
              borderTop: index === 0 ? "1px solid rgba(0, 0, 0, 0.12)" : "none",
              "&:hover": {
                backgroundColor: "action.hover",
              },
              "&:active": {
                backgroundColor: "action.selected",
              },
              ...item.sx,
            }}
          >
            {iconPosition === "left" && item.icon && (
              <ListItemIcon sx={{ minWidth: 36 }}>{item.icon}</ListItemIcon>
            )}

            <ListItemText
              primary={item.name}
              primaryTypographyProps={{ variant: textVariant }}
            />

            {iconPosition === "right" && item.icon && (
              <ListItemIcon sx={{ minWidth: 36, justifyContent: "flex-end" }}>
                {item.icon}
              </ListItemIcon>
            )}
          </ListItem>
        ))}
      </List>
    </Box>
  );
};

ListGenerator.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      icon: PropTypes.node,
      onClick: PropTypes.func,
      sx: PropTypes.object,
    })
  ).isRequired,
  dense: PropTypes.bool,
  divider: PropTypes.bool,
  iconPosition: PropTypes.oneOf(["left", "right"]),
  textVariant: PropTypes.string,
  sx: PropTypes.object,
};

export default ListGenerator;