Add job tags

This commit is contained in:
Dejvino 2023-05-28 09:33:47 +02:00
parent 6449c610f7
commit dac3fc1940
2 changed files with 27 additions and 1 deletions

View File

@ -2,13 +2,15 @@ import React from 'react';
import Card from 'react-bootstrap/Card';
import { useAutoFocus } from '../../hooks/FocusedElement';
import { Placeholder } from 'react-bootstrap';
import JobTags from './JobTags';
export type Props = {
heading?: string,
position: string,
timerange: string,
company: string,
description: string
description: string,
tags?: string[]
};
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>
</Card.Subtitle>
<Card.Text className='multiline'>{props.description}</Card.Text>
{props.tags && <JobTags tags={props.tags} />}
</Card.Body>
</Card>
);

View 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>
)
}