Add job tags
This commit is contained in:
parent
6449c610f7
commit
dac3fc1940
@ -2,13 +2,15 @@ import React from 'react';
|
|||||||
import Card from 'react-bootstrap/Card';
|
import Card from 'react-bootstrap/Card';
|
||||||
import { useAutoFocus } from '../../hooks/FocusedElement';
|
import { useAutoFocus } from '../../hooks/FocusedElement';
|
||||||
import { Placeholder } from 'react-bootstrap';
|
import { Placeholder } from 'react-bootstrap';
|
||||||
|
import JobTags from './JobTags';
|
||||||
|
|
||||||
export type Props = {
|
export type Props = {
|
||||||
heading?: string,
|
heading?: string,
|
||||||
position: string,
|
position: string,
|
||||||
timerange: string,
|
timerange: string,
|
||||||
company: string,
|
company: string,
|
||||||
description: string
|
description: string,
|
||||||
|
tags?: string[]
|
||||||
};
|
};
|
||||||
|
|
||||||
export function JobCardPlaceholder() {
|
export function JobCardPlaceholder() {
|
||||||
@ -38,6 +40,7 @@ export default function JobCard(props: Props) {
|
|||||||
<span className='company-name'>{props.company}</span>, <span className='timerange'>{props.timerange}</span>
|
<span className='company-name'>{props.company}</span>, <span className='timerange'>{props.timerange}</span>
|
||||||
</Card.Subtitle>
|
</Card.Subtitle>
|
||||||
<Card.Text className='multiline'>{props.description}</Card.Text>
|
<Card.Text className='multiline'>{props.description}</Card.Text>
|
||||||
|
{props.tags && <JobTags tags={props.tags} />}
|
||||||
</Card.Body>
|
</Card.Body>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
23
src/app/components/job/JobTags.tsx
Normal file
23
src/app/components/job/JobTags.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { useAutoFocus } from "@/app/hooks/FocusedElement";
|
||||||
|
import React from "react";
|
||||||
|
import { Container } from "react-bootstrap";
|
||||||
|
|
||||||
|
export type Props = {
|
||||||
|
tags: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function JobTag(props: {text: string}) {
|
||||||
|
const tagKey = 'tag ' + props.text;
|
||||||
|
const elementRef = useAutoFocus(tagKey)
|
||||||
|
return (
|
||||||
|
<span ref={elementRef} className='badge text-bg-light'>{props.text}</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function JobTags(props: Props) {
|
||||||
|
return (
|
||||||
|
<Container className='job-tags' fluid>
|
||||||
|
{props.tags.map((tag, index) => <JobTag key={index} text={tag} />)}
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user