Remove autofocus from tags. Refactoring.

src/app/components/Tag.tsx

@@ -0,0 +1,7 @@
+import React from "react"
+
+export default function Tag(props: {text: string}) {
+    return (
+        <span className='badge text-bg-light'>{props.text}</span>
+    )
+}

src/app/components/TagCloud.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import Container from 'react-bootstrap/Container';
-import { useAutoFocus, useFocusedElement } from '../hooks/FocusedElement';
+import { useAutoFocus } from '../hooks/FocusedElement';
+import Tag from './Tag';
 
 export type Props = {
     title: string,
@@ -9,14 +10,6 @@ export type Props = {
     style?: 'primary' | 'light'
 }
 
-function Tag(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 TagCloud(props: Props) {
     const focusRef = useAutoFocus<HTMLDivElement>('tags ' + props.title)
     const containerClasses = ['tag-cloud', 'cloud-' + (props.style || 'standard')]

src/app/components/job/JobCard.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Card from 'react-bootstrap/Card';
 import { useAutoFocus } from '../../hooks/FocusedElement';
 import { Placeholder } from 'react-bootstrap';
-import JobTags from './JobTags';
+import JobTags, { focusKeyPlaceholder } from './JobTags';
 import { Job } from '@/PersonalDataTypes';
 import md from '../Markdown';
 

src/app/components/job/JobTags.tsx

@@ -1,23 +1,15 @@
-import { useAutoFocus } from "@/app/hooks/FocusedElement";
 import React from "react";
 import { Container } from "react-bootstrap";
+import Tag from "../Tag";
 
 export type Props = {
-    tags: string[]
+    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} />)}
+            {props.tags.map((tag, index) => <Tag key={index} text={tag} />)}
         </Container>
     )
 }