{"size": 4042, "ext": "js", "max_stars_repo_path": "frontend/src/components/Market/marketSideBar.js", "max_stars_repo_name": "ShenShu2016/uwcssa_ca", "max_stars_repo_stars_event_min_datetime": "2021-07-26T06:24:24.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-16T04:48:58.000Z", "max_issues_repo_path": "frontend/src/components/Market/marketSideBar.js", "max_issues_repo_name": "ShenShu2016/uwcssa_ca", "max_issues_repo_issues_event_min_datetime": "2021-07-26T02:33:55.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-02T21:23:25.000Z", "max_forks_repo_path": "frontend/src/components/Market/marketSideBar.js", "max_forks_repo_name": "ShenShu2016/uwcssa_ca", "max_forks_repo_forks_event_min_datetime": "2021-07-25T06:10:53.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-17T21:40:03.000Z"}
{"max_stars_count": 35, "max_issues_count": 36, "max_forks_count": 35, "avg_line_length": 25.7452229299, "max_line_length": 72, "alphanum_fraction": 0.4866402771}
import {
  Box,
  Button,
  Divider,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Paper,
  Typography,
} from "@mui/material";
import { CategoryIcons, SearchArea } from "./marketItemSearch";

import AddIcon from "@mui/icons-material/Add";
import { Link } from "react-router-dom";
import MarketFIlterLocation from "./marketFilterLocation";
import NotificationsIcon from "@mui/icons-material/Notifications";
import React from "react";
import WorkIcon from "@mui/icons-material/Work";
import { makeStyles } from "@mui/styles";

const MarketSideBar = ({ clickHandler, darkTheme }) => {
  const useStyles = makeStyles((theme) => ({
    info: {
      width: "360px",
      height: "100%",
      float: "left",
      overflow: "hidden",
      position: "relative",

      [theme.breakpoints.down("md")]: {
        width: "100%",
        height: "100%",
      },
    },
    paper: {
      padding: "1rem",
      height: "100%",
      marginRight: "5px",
      position: "absolute",
      top: "0",
      left: "0",
      right: "0",
      overflow: "hidden",
    },
  }));
  const classes = useStyles();

  const UtilityIcons = () => {
    return (
      <Box color={`${darkTheme ? "#787878" : "#fffff"}`}>
        <List>
          <ListItem disablePadding>
            <ListItemButton component={Button} onClick={clickHandler}>
              <ListItemIcon>
                <WorkIcon />
              </ListItemIcon>
              <ListItemText primary="查看全部" />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton component={Link} to="/market/notifications">
              <ListItemIcon>
                <NotificationsIcon />
              </ListItemIcon>
              <ListItemText primary="消息" />
            </ListItemButton>
          </ListItem>
        </List>
      </Box>
    );
  };

  return (
    <Box className={classes.info}>
      <Paper className={classes.paper} elevation={3}>
        <Typography
          variant="h5"
          marginBottom="1rem"
          fontWeight="bold"
          color={`${darkTheme ? "#787878" : "#fffff"}`}
        >
          商城
        </Typography>
        <Box width="100%" marginBottom="1rem" overflow="hidden">
          <SearchArea darkTheme={darkTheme} />
          <UtilityIcons />
          <Button
            variant="outlined"
            sx={{ marginX: "1rem", marginBottom: "1rem" }}
            startIcon={<AddIcon />}
            component={Link}
            to="/market/create"
          >
            新增商品
          </Button>
          <Divider />
        </Box>

        <Box
          width="100%"
          overflow="hidden"
          color={`${darkTheme ? "#787878" : "#fffff"}`}
        >
          <Typography variant="h6" fontWeight="bold">
            位置
          </Typography>
          <MarketFIlterLocation marketType={"all"} />
        </Box>
        <Typography
          variant="h6"
          marginBottom="1rem"
          fontWeight="bold"
          color={`${darkTheme ? "#787878" : "#fffff"}`}
        >
          类别
        </Typography>
        <Box
          width="100%"
          sx={{
            overflowY: "auto",
            color: "#c1c1c1",

            transition: "color 0.3s",
            "&:hover": {
              color: "#a9a9a9",
            },
            "&::-webkit-scrollbar": {
              width: "14px",
            },

            "&::-webkit-scrollbar-button": {
              width: 0,
              height: 0,
              display: "none",
            },
            "&::-webkit-scrollbar-thumb": {
              backgroundClip: "content-box",
              border: "4px solid transparent",
              borderRadius: "7px",
              boxShadow: "inset 0 0 0 10px",
            },
            "&::-webkit-scrollbar-corner": {
              backgroundColor: "transparent",
            },
          }}
        >
          <CategoryIcons darkTheme={darkTheme} />
        </Box>
      </Paper>
    </Box>
  );
};

export default MarketSideBar;
