src/components/Jobs/Jobs.js

import React, { Component } from 'react'
import classNames from 'classnames'
import styles from './Jobs.module.scss'
import box from 'src/img/box_blue.png'
import vector from 'src/img/Vector.png'


const vacancies = [
  {id: 1, title: 'SEO'},
  {id: 2, title: 'Marketing'},
  {id: 3, title: 'Programming'},
  {id: 4, title: 'SEO'},
  {id: 5, title: 'Marketing'},
  {id: 6, title: 'Programming'},
  {id: 8, title: 'Marketing'},
  {id: 9, title: 'SEO'},
];

const offers = [
  {id: 1, title: 'Marketing', description: 'Senior Director, Data Partnerships - New Business Development'},
  {id: 2, title: 'Marketing', description: 'Senior Software Engineer - Test Tools & Infrastructure'},
  {id: 3, title: 'Marketing', description: 'Senior Software Engineer - Test Tools & Infrastructure'},
  {id: 4, title: 'Marketing', description: 'Senior Software Engineer - Test Tools & Infrastructure'}
]
class Jobs extends Component {
  render() {
    const { className} = this.props
    return (
      <div className={classNames(className, styles.root)}>
        <section className={styles.container}>
          <header className={styles.header}>
            <h1>JOBS</h1>
          </header>
          <div className={styles.blocksContainer}>
            <div className={styles.tagsContainer} >
            <div className ={styleMedia.jobsTitle}><h2>Tags:</h2></div>
            <div className={styles.buttonsContainer}>
             {vacancies.map(item => ( <button className={styles.button} key={item.id}>{item.title}</button>))}
             </div>
              <div className={styles.gemsContainer}>
                <div className={styles.innerContainer}>
                  <p className={styles.gems}>Like these<br /> gems?</p>
                  <button className={styles.allJobs}>View all jobs</button>
                </div>
              </div>
            </div>
            <div className={styles.vacanciesContainer}>
            {offers.map(item => (  <div className={styles.jobOffer}>
             <div className={styles.headerVacancy} key={item.id}>
                <p>{item.title}</p>
                  <div className={styles.box}>
                  <img src={box}alt=""></img>
                  </div>
                  <div className={styles.description}>
                    <p> {item.description}</p>
                  </div>
                  <div className={styles.bottomLine}>
                    <p>BOX</p>
                    <img src={vector} className={styles.vector} alt="" ></img>
                  </div>
              </div>
            </div>))}
            </div>
          </div>
        </section>
      </div>
    )
  }
}





export default Jobs