{"size": 2970, "ext": "js", "max_stars_repo_path": "frontend/react-app/src/features/banner/templates/index.js", "max_stars_repo_name": "ilonny/veg-delivery", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "frontend/react-app/src/features/banner/templates/index.js", "max_issues_repo_name": "ilonny/veg-delivery", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend/react-app/src/features/banner/templates/index.js", "max_forks_repo_name": "ilonny/veg-delivery", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 32.2826086957, "max_line_length": 90, "alphanum_fraction": 0.4851851852}
import React from "react";
import styled from "styled-components";
import { Block } from "../organisms/block";
import { BigBannerWrapper } from "../organisms/big-banner-wrapper";
import { BlockAbsoluteContentWrapper } from "../organisms/block-absolute-content-wrapper";
import { CategoryName } from "../organisms/category-name";
import { ImageView, Gradient, HoverButton } from "../../common";
import { Row } from "../../styled-components-layout";
import { Media } from "../../../lib";
import { Link } from "react-router-dom";
export const Banner = (props) => {
  let subarray, array, size;
  if (props.small) {
    array = props.data; //массив, можно использовать массив объектов
    size = props.colSize || 2; //размер подмассива
    subarray = []; //массив в который будет выведен результат.
    for (let i = 0; i < Math.ceil(array.length / size); i++) {
      subarray[i] = array.slice(i * size, i * size + size);
    }
  }
  return (
    <>
      {!props.small ? (
        <BigBannerWrapper>
          {props.data.map((block) => (
            <Block key={block.btnText} gap={true}>
              <ImageView src={block.image} />
              <BlockAbsoluteContentWrapper>
                <Gradient absoluteView={true} dark={true} />
                <Link to={block.href}>
                  <HoverButton color="#fff" backgroundColor="transparent">
                    {block.btnText}
                  </HoverButton>
                </Link>
              </BlockAbsoluteContentWrapper>
            </Block>
          ))}
        </BigBannerWrapper>
      ) : (
        <>
          {subarray.map((row, index) => (
            <Row
              align="center"
              gap={"20px"}
              mobile_wrap="true"
              key={row[index].btnText}
            >
              {row.map((block) => (
                <LinkStyled
                  key={block.btnText}
                  multiline={true}
                  flex={props.multiline ? "1 1 50%" : "1"}
                >
                  <Link to="/">
                    <Block key={block.btnText}>
                      <ImageView src={block.image} />
                      <BlockAbsoluteContentWrapper small={true}>
                        <Gradient
                          absoluteView={true}
                          dark={true}
                          percent="0%"
                        />
                        <CategoryName name={block.btnText} />
                      </BlockAbsoluteContentWrapper>
                    </Block>
                  </Link>
                </LinkStyled>
              ))}
            </Row>
          ))}
        </>
      )}
    </>
  );
};

const LinkStyled = styled.div`
  display: block;
  &:hover [data-gradient="true"] {
    background: linear-gradient(transparent 50%, black);
  }
  &:hover span {
    text-decoration: none;
  }
  ${Media.mobile} {
    margin-left: 0 !important;
    &:not(:first-child) {
      margin-top: 30px;
    }
  }
`;
