{"size": 5053, "ext": "js", "max_stars_repo_path": "src/components/Carousels/FoodCarousel.js", "max_stars_repo_name": "rajprakash00/advaita-2020", "max_stars_repo_stars_event_min_datetime": "2020-07-13T20:03:14.000Z", "max_stars_repo_stars_event_max_datetime": "2020-07-13T20:03:14.000Z", "max_issues_repo_path": "src/components/Carousels/FoodCarousel.js", "max_issues_repo_name": "rajprakash00/advaita-2020", "max_issues_repo_issues_event_min_datetime": "2021-01-06T05:49:53.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-10T23:14:20.000Z", "max_forks_repo_path": "src/components/Carousels/FoodCarousel.js", "max_forks_repo_name": "rajprakash00/advaita-2020", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 31.9810126582, "max_line_length": 80, "alphanum_fraction": 0.5521472393}
import React, { Component } from "react";
import { Link } from "react-router-dom";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import gol from "../../img/FoodFinal/Gol.png";
import maggie from "../../img/FoodFinal/Maggie.png";
import food from "../../img/backgrounds/FoodBg.jpg";
import shole from "../../img/FoodFinal/Shole.png";
import string from "../../img/FoodFinal/String.png";
import trait from "../../img/FoodFinal/Trait.png";
import misc from "../../img/FoodFinal/Misc.png";

const images = [gol, maggie, shole, string, trait, misc];

const thumbnail = [
  <h1 className="thumb_name">Golgappa King</h1>,
  <h1 className="thumb_name">Maggie Chef</h1>,
  <h1 className="thumb_name">Shole Parathe</h1>,
  <h1 className="thumb_name">String Delegacy</h1>,
  <h1 className="thumb_name">Track Bait</h1>,
  <h1 className="thumb_name">Misc Games</h1>,
  <h1 className="thumb_name">Golgappa King</h1>,
  <h1 className="thumb_name">Maggie Chef</h1>,
  <h1 className="thumb_name">Shole Parathe</h1>,
  <h1 className="thumb_name">String Delegacy</h1>,
  <h1 className="thumb_name">Track Bait</h1>,
  <h1 className="thumb_name">Misc Games</h1>
];

const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 992 },
    items: 5,
    partialVisibilityGutter: 40
  },
  tablet: {
    breakpoint: { max: 992, min: 576 },
    items: 3,
    partialVisibilityGutter: 30
  },
  mobile: {
    breakpoint: { max: 576, min: 0 },
    items: 1,
    partialVisibilityGutter: 30
  }
};

export default class FoodCarousel extends Component {
  render() {
    let index;
    const CustomButtonGroup = ({
      next,
      previous,
      goToSlide,
      carouselState
    }) => {
      const { currentSlide } = carouselState;

      index = currentSlide + 2;
      while (index >= 8) {
        index = index - 6;
      }

      if (window.innerWidth <= 992 && window.innerWidth >= 576) {
        index = index - 1;
        return (
          <div className="custom-button-group">
            <button className="thumb_slider" onClick={() => previous()}>
              {React.Children.toArray(thumbnail)[index - 1]}
            </button>
            <button
              className="thumb_slider zoom"
              style={{ backgroundColor: "#fdb688" }}
            >
              {React.Children.toArray(thumbnail)[index]}
            </button>
            <button className="thumb_slider" onClick={() => next()}>
              {React.Children.toArray(thumbnail)[index + 1]}
            </button>
          </div>
        );
      }

      if (window.innerWidth <= 576) {
        index = index + 2;
        return (
          <div className="custom-button-group">
            <button className="thumb_slider" onClick={() => previous()}>
              {React.Children.toArray(thumbnail)[index - 1]}
            </button>
            <button
              className="thumb_slider zoom"
              style={{ backgroundColor: "#fdb688" }}
              onClick={() => goToSlide(index)}
            >
              {React.Children.toArray(thumbnail)[index]}
            </button>
            <button className="thumb_slider" onClick={() => next()}>
              {React.Children.toArray(thumbnail)[index + 1]}
            </button>
          </div>
        );
      }
      return (
        <div className="custom-button-group">
          <button className="thumb_slider" onClick={() => goToSlide(index - 6)}>
            {React.Children.toArray(thumbnail)[index - 2]}
          </button>
          <button className="thumb_slider" onClick={() => previous()}>
            {React.Children.toArray(thumbnail)[index - 1]}
          </button>
          <button
            className="thumb_slider zoom"
            style={{ backgroundColor: "#fdb688" }}
            onClick={() => goToSlide(index + 8)}
          >
            {React.Children.toArray(thumbnail)[index]}
          </button>
          <button className="thumb_slider" onClick={() => next()}>
            {React.Children.toArray(thumbnail)[index + 1]}
          </button>
          <button className="thumb_slider" onClick={() => goToSlide(index - 2)}>
            {React.Children.toArray(thumbnail)[index + 2]}
          </button>
        </div>
      );
    };

    return (
      <section
        className="container_event"
        style={{ backgroundImage: `url(${food})` }}
      >
        <h1>Food Events</h1>
        <Carousel
          focusOnSelect={false}
          arrows={true}
          showDots={false}
          infinite={true}
          containerClass="container-padding-bottom"
          responsive={responsive}
          customButtonGroup={<CustomButtonGroup />}
          renderButtonGroupOutside={true}
          renderDotsOutside={false}
        >
          {images.map((card, i) => {
            return (
              <Link key={i} to={`/event/food/${i + 2}`}>
                <img src={card} className="slide_card" alt="food card" />
              </Link>
            );
          })}
        </Carousel>
      </section>
    );
  }
}
