{"size": 2518, "ext": "js", "max_stars_repo_path": "src/components/LocationDisplay.js", "max_stars_repo_name": "jbaltres/liveticker", "max_stars_repo_stars_event_min_datetime": "2019-10-08T15:06:41.000Z", "max_stars_repo_stars_event_max_datetime": "2019-11-04T14:44:13.000Z", "max_issues_repo_path": "src/components/LocationDisplay.js", "max_issues_repo_name": "jbaltres/liveticker", "max_issues_repo_issues_event_min_datetime": "2019-10-09T07:53:42.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-18T13:27:02.000Z", "max_forks_repo_path": "src/components/LocationDisplay.js", "max_forks_repo_name": "jbaltres/liveticker", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 8, "max_issues_count": 9, "max_forks_count": null, "avg_line_length": 20.144, "max_line_length": 79, "alphanum_fraction": 0.6413820492}
import React from "react";
import styled from "styled-components";

const WeekCardContainer = styled.main`
  display: flex;

  width: 100vw;
  padding: 20px;
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to right, rgba(37, 206, 197, 1), black) 50 15%;
`;

const LogoIMG = styled.img`
  justify-content: center;
  align-items: center;
`;

const WeekContentContainer = styled.div`
  display: flex;
  flex-direction: column;
`;

const ImageContainer = styled.div`
  display: flex;
  align-items: center;
  width: 100px;
`;

const PartyName = styled.h2`
  color: rgb(250, 72, 123);
  margin: 0px;
`;

const PartyDescription = styled.p`
  color: rgb(250, 72, 123);
  margin: 0px;
`;

const Musik = styled.p`
  color: rgb(229, 90, 189);
  margin: 0px;
`;

const Location = styled.p`
  color: rgb(186, 116, 243);
  margin: 0px;
`;

const Adress = styled.p`
  color: rgb(0, 195, 238);

  margin: 0px;
`;

const FlipCard = styled.div`
  background-color: transparent;
  width: 100vw;
  height: 80px;
  perspective: 1000px;
`;

const FlipCardInner = styled.div`
  position: relative;
  width: 100%;

  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;

  :hover {
    transform: rotateY(180deg);
  }
`;

const FlipCardFront = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;

  backface-visibility: hidden;
  color: black;
`;

const FlipCardBack = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;

  backface-visibility: hidden;
  color: white;
  transform: rotateY(180deg);
`;

export default function LocationDisplay(location) {
  return (
    <WeekCardContainer>
      <FlipCard>
        <FlipCardInner>
          <FlipCardFront>
            <ImageContainer>
              <LogoIMG src={location.locationlogo} />
            </ImageContainer>
            <WeekContentContainer>
              <PartyName>{location.partyname}</PartyName>
              <PartyDescription>{location.partydescription}</PartyDescription>
            </WeekContentContainer>
          </FlipCardFront>
          <FlipCardBack>
            <WeekContentContainer>
              <Musik>{location.actor}</Musik>
              <Location>{location.locationname}</Location>
              <Adress>{location.adress}</Adress>
            </WeekContentContainer>
          </FlipCardBack>
        </FlipCardInner>
      </FlipCard>
    </WeekCardContainer>
  );
}
