{"size": 3326, "ext": "js", "max_stars_repo_path": "components/FeaturedProjectCarousel.js", "max_stars_repo_name": "skattyadz/bradley-mccallum", "max_stars_repo_stars_event_min_datetime": "2018-08-31T13:03:03.000Z", "max_stars_repo_stars_event_max_datetime": "2019-05-31T11:12:29.000Z", "max_issues_repo_path": "components/FeaturedProjectCarousel.js", "max_issues_repo_name": "skattyadz/bradley-mccallum", "max_issues_repo_issues_event_min_datetime": "2019-05-31T10:42:03.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-09T22:55:29.000Z", "max_forks_repo_path": "components/FeaturedProjectCarousel.js", "max_forks_repo_name": "skattyadz/bradley-mccallum", "max_forks_repo_forks_event_min_datetime": "2018-08-31T13:03:04.000Z", "max_forks_repo_forks_event_max_datetime": "2018-08-31T13:03:04.000Z"}
{"max_stars_count": 3, "max_issues_count": 15, "max_forks_count": 1, "avg_line_length": 27.262295082, "max_line_length": 102, "alphanum_fraction": 0.5030066146}
import PrismicDom from 'prismic-dom';
import Link from 'next/link';
import cx from 'classnames';

import Image from '~/components/Image';
import RichText from '~/components/RichText';
import Carousel from '~/components/Carousel';
import {
  weights,
  fonts,
  lineHeights,
  colors,
  spacing,
  HEADER_HEIGHT,
} from '~/lib/theme';

const FOOTER_HEIGHT = 52;

export default class FeaturedProjectCarousel extends React.Component {
  state = { selectedIndex: 0 };

  handleIndexChange = (id, item) => {
    this.setState({ selectedIndex: id });
  };

  handleDotClick = e => {
    const selectedIndex = e.target.value;
    this.setState({ selectedIndex });
  };

  render() {
    const { features } = this.props;
    const { selectedIndex } = this.state;
    const selectedProject = features[selectedIndex].project;

    return (
      <div className="root">
        <Carousel
          onChange={this.handleIndexChange}
          selectedIndex={selectedIndex}
        >
          {features
            .filter(({ image, project }) => image && project.uid)
            .map(({ image, project }, i) => (
              <Link
                as={`/project/${project.uid}`} // URL exposed to the browser
                href={`/project?slug=${project.uid}`} // simplified URL for next.js client routing
                prefetch={i === 0}
                key={project.uid}
              >
                <a
                  className="item"
                  style={{ backgroundImage: `url(${image.url})` }}
                />
              </Link>
            ))}
        </Carousel>

        <footer>
          <Link
            as={`/project/${selectedProject.uid}`} // URL exposed to the browser
            href={`/project?slug=${selectedProject.uid}`} // simplified URL for next.js client routing
            key={selectedProject.id}
          >
            <a className="tab">
              <div className="year">
                {selectedProject.year_text ||
                  new Date(selectedProject.date).getFullYear()}
              </div>
              <div className="title">
                {PrismicDom.RichText.asText(selectedProject.title)}
              </div>
            </a>
          </Link>
        </footer>

        <style jsx>{`
          .root {
            opacity: 0.999;
            margin-bottom: ${spacing.s3};
          }

          .item {
            display: block;
            background-size: cover;
            background-position: center;
            height: calc(100vh - ${HEADER_HEIGHT}px - ${FOOTER_HEIGHT}px);
          }

          footer {
            position: relative;
            height: ${FOOTER_HEIGHT}px;
          }

          .tab {
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 1;
            background: ${colors.lightGrey};
            padding: ${spacing.s1} 25px 20px;
          }

          .year {
            font-size: ${fonts.f16};
            font-weight: ${weights.bold};
            line-height: ${lineHeights.heading};
            margin-bottom: 8px;
          }

          .title {
            line-height: ${lineHeights.heading};
            font-weight: ${weights.light};
            font-size: ${fonts.f20};
            text-transform: uppercase;
          }
        `}</style>
      </div>
    );
  }
}
