text: import React from "react";
  import { makeStyles } from "@material-ui/core/styles";
  import Card from "@material-ui/core/Card";
  import CardActionArea from "@material-ui/core/CardActionArea";
  import CardContent from "@material-ui/core/CardContent";
  import Typography from "@material-ui/core/Typography";
  
  import store from "./redux/store";
  import { setProject } from "./redux/actions";
  
  const useStyles = makeStyles({
    root: {
      maxWidth: "100%",
    },
    content: {
      height: 120,
    },
    description: {
      display: "-webkit-box",
      "-webkit-line-clamp": 3,
      "-webkit-box-orient": "vertical",
      overflow: "hidden",
    },
  });
  
  const ProjectCard = (props) => {
    const classes = useStyles();
  
    const openExistingProject = () => {
      console.log("Opening existing project " + props.id);
  
      // set the state in the redux store
      store.dispatch(setProject(props.id));
  
      props.handleAppState("project-page");
    };
  
    return (
      <Card className={classes.root}>
        <CardActionArea onClick={openExistingProject}>
          <CardContent className={classes.content}>
            <Typography gutterBottom variant="h5" component="h2">
              {props.name}
            </Typography>
            <Typography
              variant="body2"
              color="textSecondary"
              component="p"
              className={classes.description}
            >
              {props.description}
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
    );
  };
  
  export default ProjectCard;
  