From dac3fc1940da4b797da84481aae7ff01b3ac3511 Mon Sep 17 00:00:00 2001
From: Dejvino <git.dejvino.cz@dejvino.cz>
Date: Sun, 28 May 2023 09:33:47 +0200
Subject: [PATCH] Add job tags

---
 src/app/components/job/JobCard.tsx |  5 ++++-
 src/app/components/job/JobTags.tsx | 23 +++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/job/JobTags.tsx

diff --git a/src/app/components/job/JobCard.tsx b/src/app/components/job/JobCard.tsx
index c83d9f1..378fc67 100644
--- a/src/app/components/job/JobCard.tsx
+++ b/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>
     );
diff --git a/src/app/components/job/JobTags.tsx b/src/app/components/job/JobTags.tsx
new file mode 100644
index 0000000..08d7294
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file