Add job tags

src/app/components/job/JobCard.tsx

@@ -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>
     );

src/app/components/job/JobTags.tsx

@@ -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>
+    )
+}