<commit_before>import PropTypes from "prop-types";
import React, { useCallback, useMemo, useState } from "react";
import styled from "styled-components";

import style from "@agir/front/genericComponents/_variables.scss";
import { getGroupTypeWithLocation } from "./utils";

import Map from "@agir/carte/common/Map";
import Modal from "@agir/front/genericComponents/Modal";
import { RawFeatherIcon } from "@agir/front/genericComponents/FeatherIcon";
import GroupLocation from "@agir/groups/groupPage/GroupLocation";

import bannerMapBackground from "@agir/groups/groupPage/images/banner-map-background.svg";

const StyledModalBody = styled.div`
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  max-width: 600px;
  padding: 0;
  margin: 100px auto 0;
  background-color: white;
  box-shadow: ${style.elaborateShadow};
  border-radius: 8px;

  @media (max-width: ${style.collapse}px) {
    max-width: calc(100% - 20px);
    margin: 10px auto 0;
    padding-bottom: 10px;
  }

  && > * {
    border: none;
    box-shadow: none;
    margin: 0;
  }

  && > button {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    align-self: flex-end;
    background: none;
    cursor: pointer;
    color: ${style.black1000};

    &:hover {
      opacity: 0.75;
    }
  }

  && > button + * {
    padding-top: 0;
    padding-bottom: 2.5rem;
  }
`;
const StyledMap = styled.div``;
const StyledBanner = styled.div`
  display: flex;
  flex-flow: row-reverse nowrap;
  background-color: ${style.secondary500};
  margin: 0 auto;

  @media (max-width: ${style.collapse}px) {
    max-width: 100%;
    flex-flow: column nowrap;
    background-color: white;
  }

  header {
    flex: 1 1 auto;
    padding: 2.25rem;

    @media (max-width: ${style.collapse}px) {
      padding: 1.5rem 1.5rem 1.25rem;
      text-align: center;
    }
  }

  h2,
  h4 {
    margin: 0;
    &::first-letter {
      text-transform: uppercase;
    }
  }

  h2 {
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.419;
    margin-bottom: 0.5rem;

    @media (max-width: ${style.collapse}px) {
      font-size: 1.25rem;
      line-height: 1.519;
    }
  }

  h4 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;

    @media (max-width: ${style.collapse}px) {
      font-size: 0.875rem;
    }

    button {
      background-color: transparent;
      font-size: inherit;
      line-height: inherit;
      font-weight: inherit;
      padding: 0;
      margin: 0;
      outline: none;
      border: none;
      cursor: pointer;
    }
  }

  ${StyledMap} {
    flex: 0 0 424px;
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 11% 0%);
    cursor: pointer;

    @media (max-width: ${style.collapse}px) {
      clip-path: none;
      width: 100%;
      flex-basis: 155px;
      background-image: url(${bannerMapBackground});
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
`;

const GroupBanner = (props) => {
  const { name, type, location, commune, iconConfiguration } = props;
  const [shouldShowModal, setShouldShowModal] = useState();

  const subtitle = useMemo(
    () => getGroupTypeWithLocation(type, location, commune),
    [type, location, commune]
  );<commit_msg>fix? group page banner map<commit_after>import PropTypes from "prop-types";
import React, { useCallback, useMemo, useState } from "react";
import styled from "styled-components";

import style from "@agir/front/genericComponents/_variables.scss";
import { getGroupTypeWithLocation } from "./utils";

import Map from "@agir/carte/common/Map";
import Modal from "@agir/front/genericComponents/Modal";
import { RawFeatherIcon } from "@agir/front/genericComponents/FeatherIcon";
import GroupLocation from "@agir/groups/groupPage/GroupLocation";

import bannerMapBackground from "@agir/groups/groupPage/images/banner-map-background.svg";

const StyledModalBody = styled.div`
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  max-width: 600px;
  padding: 0;
  margin: 100px auto 0;
  background-color: white;
  box-shadow: ${style.elaborateShadow};
  border-radius: 8px;

  @media (max-width: ${style.collapse}px) {
    max-width: calc(100% - 20px);
    margin: 10px auto 0;
    padding-bottom: 10px;
  }

  && > * {
    border: none;
    box-shadow: none;
    margin: 0;
  }

  && > button {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    align-self: flex-end;
    background: none;
    cursor: pointer;
    color: ${style.black1000};

    &:hover {
      opacity: 0.75;
    }
  }

  && > button + * {
    padding-top: 0;
    padding-bottom: 2.5rem;
  }
`;
const StyledMap = styled.div``;
const StyledBanner = styled.div`
  display: flex;
  flex-flow: row-reverse nowrap;
  background-color: ${style.secondary500};
  margin: 0 auto;

  @media (max-width: ${style.collapse}px) {
    max-width: 100%;
    flex-flow: column nowrap;
    background-color: white;
  }

  header {
    flex: 1 1 auto;
    padding: 2.25rem;

    @media (max-width: ${style.collapse}px) {
      padding: 1.5rem 1.5rem 1.25rem;
      text-align: center;
    }
  }

  h2,
  h4 {
    margin: 0;
    &::first-letter {
      text-transform: uppercase;
    }
  }

  h2 {
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.419;
    margin-bottom: 0.5rem;

    @media (max-width: ${style.collapse}px) {
      font-size: 1.25rem;
      line-height: 1.519;
    }
  }

  h4 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;

    @media (max-width: ${style.collapse}px) {
      font-size: 0.875rem;
    }

    button {
      background-color: transparent;
      font-size: inherit;
      line-height: inherit;
      font-weight: inherit;
      padding: 0;
      margin: 0;
      outline: none;
      border: none;
      cursor: pointer;
    }
  }

  ${StyledMap} {
    flex: 0 0 424px;
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 11% 0%);
    cursor: pointer;

    @media (max-width: ${style.collapse}px) {
      clip-path: none;
      width: 100%;
      height: 155px;
      flex-basis: 155px;
      background-image: url(${bannerMapBackground});
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
`;

const GroupBanner = (props) => {
  const { name, type, location, commune, iconConfiguration } = props;
  const [shouldShowModal, setShouldShowModal] = useState();

  const subtitle = useMemo(
    () => getGroupTypeWithLocation(type, location, commune),
    [type, location, commune]
  );
{'fraction_non_alphanumeric': 0.1428355043926083, 'fraction_numerical': 0.03710996667676462, 'mean_word_length': 2.7882960413080893, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3009938', 'n_tokens_mistral': 2525, 'n_tokens_neox': 2284, 'n_words': 536}