|
|
@@ -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')] |
|
|
|