src/components/AllJobs/AllJobs.js

import React, { Component } from 'react'
import styles from './AllJobs.module.scss'
import { Link } from 'gatsby'

const categories = [
  { id: 1, title: 'Experience level' },
  { id: 2, title: 'Experience level' },
  { id: 3, title: 'Experience level' },
]

class AllJobs extends Component {
  render() {
    const {
      jobs: { edges },
      jobTags,
    } = this.props
    console.log(edges)
    return (
      <div className={styles.globalContainer}>
        <div className={styles.container} />
        <div className={styles.innerContainer}>
          <div className={styles.categoriesBlock}>
            <div className={styles.categoriesInnerContainer}>
              <h1>Select job categories: </h1>
              <div className={styles.tags}>
                {jobTags.map(({ node: { id, title } }) => (
                  <button className={styles.button} key={id}>
                    {title}
                  </button>
                ))}
              </div>
              <div className={styles.bottomLine}>
                {categories.map((item) => (
                  <select className={styles.level} key={item.id}>
                    <option value="0">{item.title}</option>
                  </select>
                ))}
                <button className={styles.clear}>Clear filters</button>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.jobsContainer}>
          <div className={styles.listContainer}>
            <div className={styles.listJobs}>
              {edges.map(({ node: { title, description, locationDescription, companyLogo } }) => (
                <Link to="/" key={title} className={styles.link}>
                  <div className={styles.oneJob}>
                    <span className={styles.left}>
                      <img src={companyLogo.url} alt="" className={styles.companyLogo} />
                    </span>
                    <span className={styles.right}>
                      <div className={styles.title}>{title}</div>
                      <div className={styles.location}>{locationDescription}</div>
                      <div className={styles.description}>
                        {description.length >= 245 ? `${description.substring(0, 245)}...` : description}
                      </div>
                    </span>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default AllJobs