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

import React from 'react';
import Card from 'react-bootstrap/Card';
import { Col, Container, Placeholder, Row } from 'react-bootstrap';
import JobTags from './JobTags';
import { Job } from '@/PersonalDataTypes';
import md from '../Markdown';

export type Props = Job & {
    heading?: string
};

export function JobCardPlaceholder() {
    return <Card className='job-card'>
        <Card.Body>
        <Placeholder as={Card.Title} animation="glow">
            <Placeholder xs={6} />
        </Placeholder>
        <Placeholder as={Card.Text} animation="glow">
            <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={5} />{' '}
            <Placeholder xs={4} /> <Placeholder xs={3} />
        </Placeholder>
        </Card.Body>
    </Card>
}

export default function JobCard(props: Props) {
    return (
        <Card className='job-card'>
            {props.heading && (
                <Card.Header>{props.heading}</Card.Header>
            )}
            <Card.Body>
                <Container fluid>
                    <Row>
                        <Col>
                            <Card.Title>{props.position}</Card.Title>
                            <Card.Subtitle>
                                {props.company && <span className='company-name'>{props.company}</span>}
                                {props.company && props.timerange && <span>, </span>}
                                {props.timerange && <span className='timerange'>{props.timerange}</span>}
                            </Card.Subtitle>
                            <div className='multiline job-description'>{md(props.description)}</div>
                        </Col>
                        <Col xs={3}>
                            {props.tags && <JobTags tags={props.tags} />}
                        </Col>
                    </Row>
                </Container>
            </Card.Body>
        </Card>
    );
}