{"size": 1372, "ext": "js", "max_stars_repo_path": "frontend/src/views/Internal/Professor/Dashboard/CourseCard.js", "max_stars_repo_name": "simonmarty/rtest", "max_stars_repo_stars_event_min_datetime": "2020-07-25T22:29:20.000Z", "max_stars_repo_stars_event_max_datetime": "2020-07-27T17:49:03.000Z", "max_issues_repo_path": "frontend/src/views/Internal/Professor/Dashboard/CourseCard.js", "max_issues_repo_name": "team-rtest/rtest", "max_issues_repo_issues_event_min_datetime": "2020-09-11T21:42:44.000Z", "max_issues_repo_issues_event_max_datetime": "2021-07-13T20:03:42.000Z", "max_forks_repo_path": "frontend/src/views/Internal/Professor/Dashboard/CourseCard.js", "max_forks_repo_name": "simonmarty/rtest", "max_forks_repo_forks_event_min_datetime": "2020-09-11T18:48:02.000Z", "max_forks_repo_forks_event_max_datetime": "2021-05-24T18:15:13.000Z"}
{"max_stars_count": 2, "max_issues_count": 342, "max_forks_count": 2, "avg_line_length": 20.1764705882, "max_line_length": 70, "alphanum_fraction": 0.6129737609}
import React from "react";
import styled from "styled-components";
import { Card } from "components";
import { Link } from "react-router-dom";

function CourseCard({ _id, name, semester, color, pinned }) {
  return (
    <NavLink to={`/professor/course/${_id}/details`}>
      <Box color={color}>
        <Head>
          <Name>{name}</Name>
          <Star filled={pinned} className="fas fa-star" />
        </Head>
        <Semester>{semester}</Semester>
      </Box>
    </NavLink>
  );
}

const NavLink = styled(Link)`
  all: unset;
  &:hover {
    all: unset;
    cursor: pointer;
  }
`;

const Box = styled(Card)`
  display: block;
  background: ${(props) => props.color || "#f8f9fa"};
  padding: 20px;
  align-items: center;
  height: 10rem;
  border: none;
`;

const Head = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const Star = styled.div`
  cursor: pointer;
  color: ${(props) => (props.filled ? "gold" : "rgba(0, 0, 0, 0.2)")};
  font-size: 1.25rem;
`;

const Name = styled.h4`
  color: black;
  opacity: 0.75;
  font-weight: 600;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
`;

const Semester = styled.div`
  color: rgba(0, 0, 0, 0.5);
  font-size: 1.1rem;
  font-weight: 500;
`;

export default CourseCard;
