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

52 lines
1.5 KiB
TypeScript

import React from 'react';
import { Job } from '@/PersonalDataTypes';
import { Accordion } from 'react-bootstrap';
import { JobListProps } from './types';
import JobTags from './JobTags';
import md from '../Markdown';
function JobTitle(props: {job: Job, heading?: string}) {
const {job, heading} = props
return (
<div>
<div><strong>{job.position}</strong></div>
<div>{[job.company, job.timerange].filter(x => x).join(', ')}</div>
{heading && (<div>({heading})</div>)}
</div>
)
}
function AccordionJobItem(props: {job: Job, eventKey: string, heading?: string}) {
const {job, eventKey} = props
return (
<Accordion.Item eventKey={eventKey}>
<Accordion.Header><JobTitle job={job} /></Accordion.Header>
<Accordion.Body className='multiline'>
{md(job.description)}
{job.tags && <JobTags tags={job.tags} />}
</Accordion.Body>
</Accordion.Item>
)
}
export type Props = {
heading: string,
} & JobListProps
const defaultProps = {
entriesPerRow: 2,
currentHeading: 'Currently',
}
export default function JobsAccordion(props: JobListProps) {
const {jobs} = props
const config = {...defaultProps, ...props}
return (
<Accordion defaultActiveKey={jobs.current ? 'current-0' : 'previous-0'}>
{jobs.current?.map((job, index) => <AccordionJobItem key={index} job={job} eventKey={`current-${index}`} heading={config.currentHeading} />)}
{jobs.previous?.map((job, index) => <AccordionJobItem key={index} job={job} eventKey={`previous-${index}`} />)}
</Accordion>
)
}