cv/src/app/components/job/JobsCards.tsx

import React from 'react';
import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import JobCard, { JobCardPlaceholder } from './JobCard';
import { partition } from '../../utils';
import { JobListProps } from './types';

export type Props = {
  heading: string,
} & JobListProps

const defaultProps = {
  entriesPerRow: 2,
  currentHeading: 'Currently',
}

export function JobsCardsPlaceholder() {
  return <Container>
    <Row><Col><JobCardPlaceholder /></Col></Row>
    <Row><Col><JobCardPlaceholder /></Col></Row>
  </Container>
}

export default function JobsCards(props: JobListProps) {
  const {jobs} = props
  const config = {...defaultProps, ...props}
  return (
    <Container fluid>
      {jobs.current && (
      <Row>
        <Col>
          <JobCard heading={config.currentHeading} {...jobs.current} />
        </Col>
      </Row>
      )}
      <Row>
      {jobs.previous?.map((job, index) => (
        <Col key={index} xs={12} md={12} lg={6} xl={12}>
          <JobCard {...job} />
        </Col>
        ))}
      </Row>
    </Container>
  )
}