nile/src/pages/delta/ProjectTile.jsx

import { useState } from "react";
import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import { SiForgejo } from "react-icons/si";

function ProjectLanguages(props) {
  const { languages, smallMode } = props;
  if (!languages || languages.length === 0) return;
  return (
    <Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        justifyContent: smallMode ? "center" : "",
        gap: smallMode ? ".25rem" : ".5rem",
        marginTop: smallMode ? "5rem" : ".5rem",
        width: "80%",
        maxWidth: 512,
        margin: smallMode ? "auto" : "",
      }}
    >
      {languages.map((l, i) => (
        <Chip
          key={i}
          label={l}
          sx={{ borderRadius: "5px", margin: smallMode ? ".25rem" : "" }}
        />
      ))}
    </Box>
  );
}

export default function ProjectTile({
  image,
  title,
  year,
  children: description,
  disableGutter,
  openPhoto,
  link,
  languages,
}) {
  const theme = useTheme();
  const smallMode = useMediaQuery(theme.breakpoints.down("md"));
  const [gitHov, setGitHov] = useState(false);

  const toggleHover = () => setGitHov(!gitHov);

  const imageClick = () => openPhoto(image);
  return (
    <Box
      style={{
        display: "flex",
        width: "100%",
        alignItems: "center!important",
        flexWrap: smallMode ? "wrap" : "nowrap",
        marginBottom: disableGutter ? "" : "4rem",
      }}
    >
      <div style={{ width: "100%" }}>
        <img
          src={image}
          style={{ width: "90%", maxWidth: 512, marginLeft: "auto" }}
          onClick={imageClick}
        />
      </div>

      <Box
        style={{
          width: "100%",
          alignItems: "flex-start",
          display: "flex",
          flexWrap: "wrap",
          flexDirection: "column",
          margin: "auto",
        }}
      >
        <div
          style={{
            display: "inline-flex",
            width: "100%",
            justifyContent: smallMode ? "center" : "",
            flexWrap: "wrap",
          }}
        >
          <Typography variant="h5" component="div" style={{ fontWeight: 800 }}>
            {title}
          </Typography>
          <span
            style={{
              backgroundColor: "#f3ac20",
              color: "white",
              borderRadius: ".25rem",
              padding: 5,
              fontWeight: 500,
              margin: "auto 0 auto 10px",
            }}
          >
            {year}
          </span>
          <a
            href={link ?? "/"}
            style={{
              color: "#ef6723",
              opacity: gitHov ? ".8" : "1",
              display: "flex",
            }}
          >
            <SiForgejo
              size="1.5em"
              style={{
                padding: 5,
                margin: "auto 0 auto 10px",
                cursor: "pointer",
              }}
              onMouseEnter={toggleHover}
              onMouseLeave={toggleHover}
            />
          </a>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: smallMode ? "center" : "",
            width: "100%",
          }}
        >
          <Typography
            gutterBottom
            variant="subtitle1"
            component="div"
            style={{
              textAlign: smallMode ? "" : "left",
              marginTop: 10,
              width: "80%",
              maxWidth: 512,
            }}
          >
            {description}
          </Typography>
        </div>
        <ProjectLanguages languages={languages} smallMode={smallMode} />
      </Box>
    </Box>
  );
}