{"size": 1399, "ext": "js", "max_stars_repo_path": "src/components/InstructorClassList.js", "max_stars_repo_name": "WeiPeluso/fitnessanywherefrontend", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/InstructorClassList.js", "max_issues_repo_name": "WeiPeluso/fitnessanywherefrontend", "max_issues_repo_issues_event_min_datetime": "2020-07-30T03:04:00.000Z", "max_issues_repo_issues_event_max_datetime": "2021-01-06T08:00:33.000Z", "max_forks_repo_path": "src/components/InstructorClassList.js", "max_forks_repo_name": "WeiPeluso/anywhere-fitness-frontend", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 6, "max_forks_count": null, "avg_line_length": 22.9344262295, "max_line_length": 69, "alphanum_fraction": 0.5618298785}
import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const InstructorClassList = (props) => {
  return (
    <>
      {props.classes.map((aClass, index) => {
        return (
          <ClassDiv key={index}>
            <ClassLink
              to={{ pathname: `/class/${aClass.id}`, state: aClass }}
              style={{ textDecoration: "none" }}
            >
              <H3>Click Text Below for Class Details</H3>
              <p>Class Name: {aClass.classname}</p>
              <p>Location: {aClass.location}</p>
              <p>Date: {aClass.date}</p>
              <p>Time: {aClass.time}</p>
            </ClassLink>
          </ClassDiv>
        );
      })}
    </>
  );
};

export default InstructorClassList;
const ClassDiv = styled.div`
  border: 2px solid #ffa69e;
  border-radius: 5px;
  background-color: white;
  width: 20%;
  font-size: 20px;
  margin-top: 20px;
`;

const ClassLink = styled(Link)`
  text-align: center;
  width: 150%;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  margin: 40px;
  color: #000;
  background-color: #fff;
  cursor: pointer;
  outline: none;

  &:hover {
    background-color: #b8f2e6;
    box-shadow: 0px 15px 20px #b8f2e6;
    color: #ffa69e;
    transform: translateY(-7px);
  }
`;
const H3 = styled.h3`
  color: #b8f2e6;
  font-size: 15px;
`;
