@fortawesome/free-solid-svg-icons#faMapMarkerAlt JavaScript Examples

ProfileLocation = () => {
  return location ? (
    <StyledTextsLocation className="profile-texts-location">
      <a
        href={`https://www.google.com/maps/search/${location}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        <FontAwesomeIcon className="icon-fa icon-location" icon={faMapMarkerAlt} />
        {location}
      </a>
    </StyledTextsLocation>
  ) : null
}

RelatedJobs = props => (
    props.jobs.map(job => {
      const name = job.name
      const location = job?.location?.text || ''
      const category = job?.tags?.filter(tag => tag.name === 'line_of_business')?.[0]?.value || ''
      const contract = job?.tags?.filter(tag => tag.name === 'contract')?.[0]?.value || ''
      const score = job.score || null

      return (
        <Link to={`/job/?job_key=${job.key}&board_key=${job.board.key}${score ? '&s='+score : ''}`} key={`${job.key}`} className="card mini">
          <h4>{name}</h4>
          {contract && (
            <div className="job-tag">
                <div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faFileAlt} /></div>{contract}
            </div>
          )}
          {category && (
            <div className="job-tag">
                <div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faIndustry} /></div>{category}
            </div>
          )}
          {location && (
            <div className="job-tag">
                <div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faMapMarkerAlt} /></div>{location}
            </div>
          )}
        </Link>
      )
    }
  )
)

function AttributesSection({ org, className }) {
  const topCategories = org.categories.filter(cat => !cat.parent)
  const subCategories = org.categories.filter(cat => cat.parent)

  // Show all sub categories as well as top categories not represented
  // by sub categories
  const categoryList = topCategories
    .filter(
      category => !subCategories.map(cat => cat.parent.id).includes(category.id)
    )
    .concat(subCategories)

  if (!categoryList.length && !hasMeta(org)) return null

  return (
    <SidebarSectionList title="In a snapshot" className={className}>
      {categoryList.map(category => (
        <SidebarSectionList.Item
          key={category.name}
          text={category.name}
          to={category.slug}
          icon={faBox}
        />
      ))}
      {org.location && (
        <SidebarSectionList.Item text={org.location} icon={faMapMarkerAlt} />
      )}
      {org.orgType && (
        <SidebarSectionList.Item text={org.orgType} icon={faBuilding} />
      )}
      {org.headcount && (
        <SidebarSectionList.Item
          text={`${org.headcount} employees`}
          icon={faUsers}
        />
      )}
    </SidebarSectionList>
  )
}

function AttributesSection({ org, className }) {
  const topCategories = org.categories.filter(cat => !cat.parent)
  const subCategories = org.categories.filter(cat => cat.parent)

  // Show all sub categories as well as top categories not represented
  // by sub categories
  const categoryList = topCategories
    .filter(
      category => !subCategories.map(cat => cat.parent.id).includes(category.id)
    )
    .concat(subCategories)

  if (!categoryList.length && !hasMeta(org)) return null

  return (
    <SidebarSectionList title="In a snapshot" className={className}>
      {categoryList.map(category => (
        <SidebarSectionList.Item
          key={category.name}
          text={category.name}
          to={category.slug}
          icon={faBox}
        />
      ))}
      {org.location && (
        <SidebarSectionList.Item text={org.location} icon={faMapMarkerAlt} />
      )}
      {org.orgType && (
        <SidebarSectionList.Item text={org.orgType} icon={faBuilding} />
      )}
      {org.headcount && (
        <SidebarSectionList.Item
          text={`${org.headcount} employees`}
          icon={faUsers}
        />
      )}
    </SidebarSectionList>
  )
}

GithubCard = ({ name, username, description, twitter, email, image, url, blog, location, from, repo }) => {
  return (
    <div>
      <div className="card">
        {image ? <div className="card-img-div">
          <img src={image} alt="Profile-img" className="card-img" />
        </div> : null}
        {name ? <h4 className="card-title">
          {name}
        </h4> : null}
        {username ? <p className="card-para">
          {'@' + username}
        </p> : null}
        {description ? <p className="card-para">
          {description}
        </p> : null}
        {location ? <p className="card-para">
          <FontAwesomeIcon icon={faMapMarkerAlt} style={{color:'#51ad28'}} /> {location}
        </p> : null}
        <p className="card-para">
          {url ? <Link to={url} className="btn">GitHub</Link> : null}
          {blog ? <Link to={blog} className="btn">Blog</Link> : null}
        </p>
        {repo ? <p className="card-para">
          {repo} Repositories
        </p> : null}
        {from ? <p className="card-para">
          Active since <span className="active-since">{moment(from).format("MMMM Do YYYY")}</span>
        </p> : null}
        {twitter ? <div style={{ margin: "5px 0 0 10px" }}>
            <a className="anchor" href={`https://twitter.com/${twitter}`}><FontAwesomeIcon icon={faTwitter} style={{color:'#377293'}} /></a>
        </div> : null}
        {email ? <div style={{ margin: "5px 0 0 15px" }}>
            <a className="anchor" href={`mailto:${email}`}><FontAwesomeIcon icon={faEnvelope} style={{color:'#377293'}} /></a>
        </div> : null}
      </div>
    </div>
    )
}

GoogleMap = ({ mapId, header, width, height }) => {
    return (
       <div>
           {header ? <div className="header-component">
                <h2><FontAwesomeIcon className="icon-h2" icon={faMapMarkerAlt} /> <span className="h2-title">{header}</span></h2>
           </div> : null}
           <div className="map-component" style={{width: width, height: height}}>
            <iframe
                src={`https://www.google.com/maps/embed?${mapId}`}
                title="This is a unique title"
                width="100%"
                height="100%"
                frameBorder="0"
                style={{ border: 0 }}
                />
            </div>
       </div>
    )
}

ClientInfo = (props) => {


    const [details, setDetails] = useState(false);
    const toggle = () => setDetails(!details);

    const clientInfo = props.info

    const formatToPhone = phone => {
        const zip = phone.substring(0, 3)
        const middle = phone.substring(3, 6)
        const last = phone.substring(6, 10)

        if (phone.length !== 10) {
            return phone;
        }

        return `(${zip}) ${middle}-${last}`
    }

    let phone = formatToPhone(clientInfo.phone)


    if (details === true) {
        return (
            <>
            <DetailsBtn2 onClick={toggle}>View Details</DetailsBtn2>
            <Container>
                <Mod isOpen={details} toggle={toggle}> 
                <MH1 data-cy="assign-tech-header">{clientInfo.companyName}</MH1>
                <hr></hr>
                <MBody>
                    <SpaceBetween>
                        <div>
                            <BorderedDiv>
                                <FontAwesomeIcon icon={faPhone} />
                                <MDiv>
                                    <p>{phone}</p>
                                </MDiv>
                            </BorderedDiv>
                            <BorderedDiv>
                                <FontAwesomeIcon icon={faMapMarkerAlt} />
                                <MDiv>
                                    <p>{clientInfo.street}</p>
                                    <p>{clientInfo.city}</p>
                                    <p>{clientInfo.state}</p>
                                    <p>{clientInfo.zip}</p>
                                </MDiv>
                            </BorderedDiv>
                            <BorderedDiv>
                            <FontAwesomeIcon icon={faUser} />
                                <MDiv>
                                    {/* @TODO: Pull this info from props */}
                                    <p>{clientInfo.contactName}</p>
                                    <p>{clientInfo.contactEmail}</p>
                                </MDiv>
                            </BorderedDiv>
                        </div>
                    </SpaceBetween>
                    <MButton onClick={toggle}>Done</MButton>
                </MBody>
                </Mod>
            </Container>
            </>
        )
    } else {
        return (
            <DetailsBtn onClick={toggle}>View Details</DetailsBtn>
        )
    }
}

Job = ({ job }) => {
  const {
    userId,
    jobTitle,
    jobCreatorLogo,
    jobLocation,
    // jobApplyURL,
    jobCreator,
    dateModified,
    jobDescription,
    jobWorkType,
  } = job;

  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen((prevState) => !prevState);

  return (
    <ListGroupItem className="job-card" key={userId}>
      <div className="d-flex flex-column">
        <div className="job-card--header mb-3">
          {jobCreatorLogo ? (
            <img className="job-image" src={jobCreatorLogo} alt={jobCreator} />
          ) : (
            <h3 className="company mr-4">{jobCreator}</h3>
          )}

          <span className="text-tiny job-time">
            {moment(dateModified).fromNow()}
          </span>

          <Dropdown
            className="drop-down-icon"
            isOpen={dropdownOpen}
            toggle={toggle}
          >
            <DropdownToggle>
              <FontAwesomeIcon icon={faEllipsisV} />
            </DropdownToggle>
            <DropdownMenu right>
              <DropdownItem>
                <FontAwesomeIcon icon={faHeart} className="mr-1" /> Save Job
              </DropdownItem>
              <DropdownItem>
                <FontAwesomeIcon icon={faBan} className="mr-2" />
                Not Interested
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>

        <div className="mr-auto">
          <h4 className="job-card--title text-dark">{jobTitle}</h4>
          <h6 className="text-muted">
            <FontAwesomeIcon icon={faMapMarkerAlt} />
            <span className="ml-2">{jobLocation}</span>
          </h6>

          <p>
            {jobDescription.replace(/(<([^>]+)>)/gi, "").substring(0, 100)} ...
          </p>

          <Badge className="p-2 mt-1 mr-2" color="primary">
            {jobWorkType}
          </Badge>
        </div>
      </div>
    </ListGroupItem>
  );
}

render() {
    const {
      startDate,
      endDate,
      status,
      location,
      formLink,
    } = this.props.details;

    return (
      <div className="row">
        <span className="col-md">
          <FontAwesomeIcon icon={faClock} size="1x" />
          <p className={`h6 m-0 p-0 ${styles["event-details_text"]}`}>
            {" "}
            From : {parseDate(startDate)}
          </p>
          <p className={`h6 m-0 p-0 ${styles["event-details_text"]}`}>
            {" "}
            To : {parseDate(endDate)}
          </p>
        </span>
        {location ? (
          <span className="col-md">
            <FontAwesomeIcon icon={faMapMarkerAlt} size="1x" />
            <p className={`h5 ${styles["event-details_text"]}`}>{location}</p>
          </span>
        ) : null}
        {formLink && status === "upcoming" ? (
          <span className="col-lg my-3">
            <a
              href={formLink}
              target="_blank"
              rel="noopener noreferrer"
              className={`rounded-pill ${styles["apply-btn"]}`}
            >
              Apply Now!
            </a>
          </span>
        ) : null}
      </div>
    );
  }

render() {
    const { event } = this.props;
    let isDescArabic = isArabic(event.metaDescription);
    return (
      <section className={styles["event-card_content"]}>
        <figure className={styles["events-card_cover"]} key={event}>
          <Link to={"/events/" + event._id}>
            <LazyImage
              alt={`event ${event.title}`}
              src={event.cover}
              key={event._id}
            />
          </Link>
          <figcaption>
            <h3>
              <Link
                to={"/events/" + event._id}
                className={styles["event-card_title"]}
              >
                {event.title}
              </Link>
            </h3>
            <p
              className={`${styles["event-card_description"]} ${
                isDescArabic && "letter-spacing-none"
              }`}
            >
              {event.metaDescription}
            </p>
          </figcaption>
        </figure>
        <section className={styles["event-card_SubDescription"]}>
          <div className={styles["event-card-SubDescription_content"]}>
            <div className={styles["event-card-SubDescription_info"]}>
              <FontAwesomeIcon
                icon={faCalendarCheck}
                className={styles["event-card_icon"]}
              />
              <span> {parseDate(event.startDate)}</span>
            </div>
            <div className={styles["event-card-SubDescription_info"]}>
              {event.location && event.location.length ? (
                <>
                  <FontAwesomeIcon
                    icon={faMapMarkerAlt}
                    className={styles["event-card_icon"]}
                  />
                  <span>{event.location}</span>
                </>
              ) : (
                <>
                  <FontAwesomeIcon
                    icon={faCalendarTimes}
                    className={styles["event-card_icon"]}
                  />
                  <span>{parseDate(event.endDate)}</span>{" "}
                </>
              )}
            </div>
          </div>
        </section>
      </section>
    );
  }

JobList = (props) => {
  return (
    <div className="jobs">
      {
        props.jobs.map(job => {
          const name = job.name
          const location = job.location.text
          const company = job.tags.filter(tag => tag.name === 'company')?.[0]?.value
          const category = job.tags.filter(tag => tag.name === 'category')?.[0]?.value
          const type = job.tags.filter(tag => tag.name === 'type')?.[0]?.value
          const description = job.summary
          const profileJobTag = { name: 'application_board_job_key', value: `${process.env.SOURCE_KEY}-${job.key}` }
          const isInterested  = props.profile?.payload?.tags?.filter(tag => JSON.stringify(tag) === JSON.stringify(profileJobTag)).length > 0
          const score = job.score || null
          return (
            <Link to={`/job/?job_key=${job.key}&board_key=${job.board.key}${score ? '&s='+score : ''}`} className={[styles.card, "card"].join(' ')} key={job.key}>
              <div className={styles.job}>
              { (score || isInterested) && (
                    <div style={{display: 'flex', alignItems: 'center', marginBottom: '1rem'}}>
                     {score && (
                         <Score
                           score={score}
                         />
                       )}
                       {isInterested && (
                           <div style={{ marginLeft: '1rem', color: '#0af' }}> <FontAwesomeIcon className="icon-left" icon={faStarHalfAlt} />Intéressé(e)</div>
                         )}
                     </div>
                  )
                }
                <div className={styles.job__info}>
                  <div className={styles.job__info_company}>
                    {company}
                  </div>
                  <div className={styles.job__info_title}>
                    {name}
                  </div>
                  <div className={styles.job__info_description}>
                    {description}
                  </div>
                  <div className={styles.job__info_details}>
                    {location && (
                      <span className={styles.details__item}>
                        <FontAwesomeIcon className="icon-left" icon={faMapMarkerAlt} /> {location}
                      </span>
                    )}
                    <span className={styles.details__item}>
                    <FontAwesomeIcon className="icon-left" icon={faIndustry} />
                      {category}
                    </span>
                    <span className={styles.details__item}>
                      <FontAwesomeIcon className="icon-left" icon={faFileAlt} />
                      {type}
                    </span>
                  </div>
                  <div className={styles.more}>
                    <div className={styles.more__content}>
                      Voir l'offre
                    </div>
                  </div>
                  <div className={styles.date}>
                    {moment(job?.created_at).locale('fr').format('DD MMMM YYYY')}
                  </div>
                </div>
              </div>
            </Link>
          )
        })
      }
    </div>
  )
}

/* add any additional icon to the library */
library.add(fab, faLaptopCode, faDrawPolygon, faEdit, faEdit, faBullhorn, faMapMarkerAlt, faPhone, faPaperPlane);

JobDetails = (props) => {
    const [firstLoad, setFirstLoad] = useState(true);
    const [job, setJob] = useState(null);
    useEffect(() => {
        props.fetchJob({jobKey: props.jobKey})
    },[props.jobKey]);

    useEffect(() => {
        if(props.job.s) {
            setJob(props.job)
        }
        return () => {
            setJob(null)
        }
    }, [props.job])
    useEffect(() => {
        if(!firstLoad) {
            if(props.profile?.s && props.profile?.put) {
                swal({
                    title: "Merci d’avoir déposé votre candidature!",
                    text: "L’un de nos consultants va l’étudier et reviendra vers vous.",
                    icon: "success",
                })
            }
            if(props.profile?.f && props.profile?.put) {
                swal(
                    {
                    type: 'error',
                    title: 'Oops...',
                    text: 'Un problème est survenu, veuillez essayer plus tard',
                    }
                )
            }
        }
        return () => {
            setFirstLoad(false)
        };
    },[props.profile])
    
    const jobData = job?.payload || null
    let taggy = ""
    if(props.documentParsing.s) {
        const text = props.documentParsing.payload.text
        const documentParsing = props.documentParsing.payload.ents.filter(item => item.label !== 'JobTitle')
        const spans = documentParsing.map(ent => {
            switch (ent.label) {
                case "FirstName": 
                    return { type: "prénom", start: ent.start, end: ent.end }
                case "LastName": 
                    return { type: "nom", start: ent.start, end: ent.end }
                case "Date": 
                    return { type: "date", start: ent.start, end: ent.end }
                case "Duration": 
                    return { type: "durée", start: ent.start, end: ent.end }
                case "Location": 
                    return { type: "localisation", start: ent.start, end: ent.end }
                case "Company": 
                    return { type: "entreprise", start: ent.start, end: ent.end }
                // case "JobTitle": 
                //     return { type: "poste", start: ent.start, end: ent.end }
                case "Task": 
                    return { type: "tâche", start: ent.start, end: ent.end }
                case "School": 
                    return { type: "école", start: ent.start, end: ent.end }
                case "EduTitle": 
                    return { type: "formation", start: ent.start, end: ent.end }
                case "Course": 
                    return { type: "cours", start: ent.start, end: ent.end }
                case "HardSkill": 
                    return { type: "savoir-faire", start: ent.start, end: ent.end }
                case "SoftSkill": 
                    return { type: "savoir-être", start: ent.start, end: ent.end }
                case "Certification": 
                    return { type: "certification", start: ent.start, end: ent.end }
                case "Language": 
                    return { type: "langue", start: ent.start, end: ent.end }
                case "Interest": 
                    return { type: "interêt", start: ent.start, end: ent.end }
                case "Email": 
                    return { type: "email", start: ent.start, end: ent.end }
                case "Phone": 
                    return { type: "téléphone", start: ent.start, end: ent.end }
                case "URL": 
                    return { type: "site-web", start: ent.start, end: ent.end }
                default: 
                    return { type: ent.label.toLowerCase(), start: ent.start, end: ent.end }
            }   
        })
    
        const ents = [
            { type: 'prénom', color: {h: 303, s: 98.1, l: 42.2, a: 1}},
            { type: 'nom', color: {h: 191, s: 95, l: 23, a: 1}},
            { type: 'date', color: {h: 229, s: 51.9, l: 54.3, a: 1}},
            { type: 'durée', color: {h: 321, s: 70.9, l: 67.6, a: 1}},
            { type: 'localisation', color: {h: 94, s: 48.6, l: 50.4, a: 1}},
            { type: 'entreprise', color: {h: 71, s: 59.5, l: 51.6, a: 1}},
            // { type: 'poste', color: {h: 52, s: 62.5, l: 43.9, a: 1}},
            { type: 'tâche', color: {h: 80, s: 75.5, l: 53.1, a: 1}},
            { type: 'école', color: {h: 282, s: 98.6, l: 71, a: 1}},
            { type: 'formation', color: {h: 291, s: 98.9, l: 36.1, a: 1}},
            { type: 'cours', color: {h: 274, s: 64.9, l: 19, a: 1}},
            { type: 'savoir-faire', color: {h: 203, s: 79.9, l: 61, a: 1}},
            { type: 'savoir-être', color: {h: 200, s: 6, l: 80.4, a: 1}},
            { type: 'certification', color: {h: 285, s: 55.7, l: 53.9, a: 1}},
            { type: 'langue', color: {h: 168, s: 82, l: 52.2, a: 1}},
            { type: 'interêt', color: {h: 272, s: 32.7, l: 43.7, a: 1}},
            { type: 'email', color: {h: 351, s: 70.3, l: 61.8, a: 1}},
            { type: 'téléphone', color:  {h: 90, s: 23.7, l: 53.7, a: 1}},
            { type: 'site-web', color: {h: 204, s: 93.9, l: 44.9, a: 1}}
        ]

        taggy = (<Taggy text={text} spans={spans} ents={ents} />)

    }

    if(jobData) {
        const name = jobData?.name;
        const descriptionContent = jobData?.sections?.filter(section => section.title === 'description')?.[0]?.description || ''
        const profileContent = jobData?.sections?.filter(section => section.title === 'profile')?.[0]?.description || ''
        const location = jobData?.location?.text || ''
        const company = jobData?.tags?.filter(tag => tag.name === 'company')?.[0]?.value || ''
        const category = jobData?.tags?.filter(tag => tag.name === 'category')?.[0]?.value || ''
        const contract = jobData?.tags?.filter(tag => tag.name === 'type')?.[0]?.value || ''
        // const activity = jobData?.tags?.filter(tag => tag.name === 'field_of_activity')?.[0]?.value || ''

        const creationDate =  moment(jobData?.created_at).format('DD MMM YYYY')
        const profileJobTag = { name: 'application_board_job_key', value: `${process.env.SOURCE_KEY}-${jobData.key}` }
        return (
            <>
                <div className="col-20 col-offer sticky col-33">
                    {/* <Link to="/jobs" className="button button--light large">
                        <FontAwesomeIcon className="icon-left" icon={faArrowLeft} /> Retour aux offres
                    </Link> */}
                    <div className="card jobDetails">
                        <div className="tags search-box">
                            {props.score && (
                                <div className="score-wrapper">
                                    <Score
                                        score={props.score}
                                    />
                                </div>
                            )}
                            {company && (
                                <div className="job-tag">
                                    <div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faBriefcase} /></div>{company}
                                </div>
                            )}
                            <h3 style={{marginBottom: '1rem'}}>Le poste</h3>
                            {contract && (
                                <div className="job-tag">
                                    <div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faFileAlt} /></div>{contract}
                                </div>
                            )}
                            {category && (
                                <div className="job-tag">
                                    <div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faIndustry} /></div>{category}
                                </div>
                            )}
                           
                            {creationDate && (
                                <div className="job-tag">
                                    <div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faCalendar} /></div>{creationDate}
                                </div>
                            )}

                            {location && (
                                <div className="job-tag">
                                    <div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faMapMarkerAlt} /></div>{location}
                                </div>
                            )}
                        </div>
                        <div className="details__drop">
                            {props.file?.fileName ? (
                                <div className="apply">
                                    {props.profile?.payload?.tags?.filter(tag => JSON.stringify(tag) === JSON.stringify(profileJobTag)).length > 0 ? (
                                        <h3 className="text-center">Vous avez candidaté à cette offre.</h3>
                                    ):(
                                        <button
                                            className="button button-large drop-button"
                                            onClick={() => props.putProfile({profile: props.profile.payload, jobKey: jobData.key})}
                                            disabled={props.profile?.r}
                                        >
                                            {props.profile?.r ? <span className="loader"></span> : 'POSTULER'}
                                        </button>
                                    )}
                                </div>
                                )
                                :
                                (
                                    <div>
                                        <Dropzone
                                            addProfile={props.addProfile}
                                            profile={props.profile}
                                            redirectTojobs={false}
                                            removeProfile={props.removeProfile}
                                            file={props.file}
                                            details
                                        />
                                    </div>
                                )
                            }
                        </div>
                    </div>
                   {props.documentRevealing.s && (
                         <Revealing revealing={props.documentRevealing} />
                   )}
                </div>
                <div className="col-60 col-67">
                    {props.documentParsing.s && (
                        <div className="jobs details">
                            <h3>Description du poste</h3>
                            <div className="details__description">
                                {taggy}
                            </div>
                            <Share
                            socialConfig={{
                                twitterHandle: 'hrflowai',
                                config: {
                                    url: `https://demo.cvbox.com/?job_key=${jobData.key}&board_key=49348f504e997c501e45a3634dce5a865370ff90`,
                                    title: name,
                                    },
                                }}
                            />
                        </div>
                    )}
                    {props.documentParsing.r && (
                        <div className="loader" style={{margin: 'auto'}}></div>
                    )}
                </div>
                <div className="col-20 col-33 col-offer">
                    {props.jobs?.payload?.jobs?.length ? (
                        <div>
                            <h3>{props.file?.fileName ? 'Offres recommandées' : 'Autres offres'}</h3>
                            <RelatedJobs jobs={props.jobs.payload.jobs.filter(job => job.key !== jobData.key).splice(0, 3)} />
                        </div>
                    )
                    :
                    (
                        ''
                    )
                }
                </div>
            </>
        )
    }

    if(props.job.f) {
        return (
            <div style={{display: 'flex', justifyContent: 'center', width: '100%'}}>
                <ErrorMessage message="Aucun résultat trouvé" />
            </div>
        )
    }

    return (
        <>
            <div className="loader" style={{margin: 'auto'}}></div>
        </>
    )

}