|
|
@@ -1,6 +1,7 @@ |
|
|
|
import React from 'react'; |
|
|
|
import Card from 'react-bootstrap/Card'; |
|
|
|
import { useAutoFocus, useFocusedElement } from '../../hooks/FocusedElement'; |
|
|
|
import { useAutoFocus } from '../../hooks/FocusedElement'; |
|
|
|
import { Placeholder } from 'react-bootstrap'; |
|
|
|
|
|
|
|
export type Props = { |
|
|
|
heading?: string, |
|
|
@@ -10,6 +11,20 @@ export type Props = { |
|
|
|
description: 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) { |
|
|
|
const focusRef = useAutoFocus<HTMLDivElement>([props.position, props.company, props.timerange].join(' - ')) |
|
|
|
return ( |
|
|
@@ -22,7 +37,7 @@ export default function JobCard(props: Props) { |
|
|
|
<Card.Subtitle> |
|
|
|
<span className='company-name'>{props.company}</span>, <span className='timerange'>{props.timerange}</span> |
|
|
|
</Card.Subtitle> |
|
|
|
<Card.Text>{props.description}</Card.Text> |
|
|
|
<Card.Text className='multiline'>{props.description}</Card.Text> |
|
|
|
</Card.Body> |
|
|
|
</Card> |
|
|
|
); |
|
|
|