@material-ui/core#ImageListItem JavaScript Examples

The following examples show how to use @material-ui/core#ImageListItem. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: schedulecard.jsx    From animeworldz with MIT License 5 votes vote down vote up 
function ScheduleCard({ Anime }) {
  const theme = useTheme();
  const classes = useStyles();

  const two_cards = useMediaQuery(theme.breakpoints.down("xs"));
  const three_cards = useMediaQuery(theme.breakpoints.down("sm"));
  const four_cards = useMediaQuery(theme.breakpoints.down("md"));

  let temp_col;
  if (two_cards) {
    temp_col = 2;
  } else if (three_cards) {
    temp_col = 3;
  } else if (four_cards) {
    temp_col = 4;
  } else {
    temp_col = 6;
  }

  return (
    <div className="root">
      <ImageList className={classes.imageList} cols={temp_col}>
        {Anime.map((item) => (
          <ImageListItem
            key={item.img}
            style={{ height: 300, padding: "12px" }}
          >
            <img src={item.img} alt={item.name} />
            <ImageListItemBar
              title={item.title}
              subtitle={`Airing: ${new Date(
                item.airing_time
              ).toLocaleTimeString()}`}
              classes={{
                root: classes.titleBar,
                title: classes.title,
              }}
              actionIcon={<Button>{`Ep ${item.episode}`}</Button>}
            />
          </ImageListItem>
        ))}
      </ImageList>
    </div>
  );
}
Example #2
Source File: PopularCards.jsx    From animeworldz with MIT License 4 votes vote down vote up 
function PopularCards({ Anime }) {
  const theme = useTheme();
  const two_cards = useMediaQuery(theme.breakpoints.down("xs"));
  const three_cards = useMediaQuery(theme.breakpoints.down("sm"));
  const four_cards = useMediaQuery(theme.breakpoints.down("md"));

  let temp_col;
  if (two_cards) {
    temp_col = 2;
  } else if (three_cards) {
    temp_col = 3;
  } else if (four_cards) {
    temp_col = 4;
  } else {
    temp_col = 6;
  }

  const classes = useStyles();
  const history = useHistory();

  const [selectedAnime, setSelectedAnime] = React.useState(null);
  const [openDialog, setOpenDialog] = React.useState(false);

  const handleOpen = (item) => {
    getAnime(item.link);
    setOpenDialog(true);
  };

  const handleClose = () => {
    setOpenDialog(false);
    setSelectedAnime(null);
  };

  const handleWatchClick = (slug) => {
    setOpenDialog(false);
    history.push({
      pathname: `/anime/${slug}`,
    });
  };

  const getAnime = (link) => {
    axios
      .post("/api/v1/anime", { uri: link })
      .then((res) => {
        setSelectedAnime(res.data);
      })
      .catch((err) => console.log(err));
  };

  const handleToEpisode = (item) => {
    setOpenDialog(false);
    history.push({
      pathname: `/anime/${item.link.replace(/\/category\//g, "")}`,
    });
  };

  return (
    <div className={classes.root}>
      {Anime.length !== 0 ? (
        <ImageList className={classes.imageList} cols={temp_col}>
          {Anime.map((item) => (
            <ImageListItem
              key={item.img}
              className={classes.img}
              style={{ height: "300px", padding: "12px" }}
            >
              <img
                src={item.img}
                alt={item.name}
                onClick={() => handleOpen(item)}
              />
              <ImageListItemBar
                title={item.name}
                subtitle={item.release}
                classes={{
                  root: classes.titleBar,
                  title: classes.title,
                }}
                actionIcon={
                  <IconButton onClick={() => handleToEpisode(item)}>
                    <PlayArrowOutlined className={classes.title} />
                  </IconButton>
                }
              />
            </ImageListItem>
          ))}
          {selectedAnime !== null ? (
            <ModalAnime
              isOpen={openDialog}
              handleWatchClick={handleWatchClick}
              data={selectedAnime}
              handleClose={handleClose}
            />
          ) : (
            ""
          )}
        </ImageList>
      ) : (
        <div style={{ height: 400 }} />
      )}
    </div>
  );
}
Example #3
Source File: RecentCards.jsx    From animeworldz with MIT License 4 votes vote down vote up 
function RecentCards({ Anime }) {
  const theme = useTheme();
  const history = useHistory();
  const classes = useStyles();
  const [selectedAnime, setSelectedAnime] = React.useState(null);
  const [openDialog, setOpenDialog] = React.useState(false);

  const two_cards = useMediaQuery(theme.breakpoints.down("xs"));
  const three_cards = useMediaQuery(theme.breakpoints.down("sm"));
  const four_cards = useMediaQuery(theme.breakpoints.down("md"));

  let temp_col;
  if (two_cards) {
    temp_col = 2;
  } else if (three_cards) {
    temp_col = 3;
  } else if (four_cards) {
    temp_col = 4;
  } else {
    temp_col = 6;
  }

  const handleOpen = (item) => {
    getAnime(item.href);
    setOpenDialog(true);
  };

  const getAnime = (link) => {
    axios
      .post("/api/v1/anime", { uri: link })
      .then((res) => {
        setSelectedAnime(res.data);
      })
      .catch((err) => console.log(err));
  };

  const handleWatchClick = (slug) => {
    setOpenDialog(false);
    history.push({
      pathname: `/anime/${slug}`,
    });
  };

  const handleClose = () => {
    setOpenDialog(false);
    setSelectedAnime(null);
  };

  const handleToEpisode = (item) => {
    setOpenDialog(false);
    history.push({
      pathname: `/anime/${item.href.replace(/\/category\//g, "")}`,
      state: {
        ep: item.recent_episode.replace(/Episode /g, ""),
      },
    });
  };

  return (
    <div className={classes.root} style={{ height: 330 }}>
      {Anime.length !== 0 ? (
        <ImageList className={classes.imageList} cols={temp_col}>
          {Anime.map((item) => (
            <ImageListItem
              key={item.img}
              className={classes.img}
              style={{ height: "300px", padding: "12px" }}
            >
              <img
                src={item.img}
                alt={item.name}
                onClick={() => handleOpen(item)}
              />
              <ImageListItemBar
                title={item.name}
                subtitle={item.recent_episode}
                classes={{
                  root: classes.titleBar,
                  title: classes.title,
                }}
                actionIcon={
                  <IconButton
                    aria-label={`star ${item.name}`}
                    onClick={() => handleToEpisode(item)}
                  >
                    <PlayArrowOutlined className={classes.title} />
                  </IconButton>
                }
              />
            </ImageListItem>
          ))}
          <ModalAnime
            isOpen={openDialog}
            handleWatchClick={handleWatchClick}
            data={selectedAnime}
            handleClose={handleClose}
          />
        </ImageList>
      ) : (
        <div style={{ height: 400 }} />
      )}
    </div>
  );
}