|
12345678910111213141516171819202122232425262728293031 |
- import React, { useEffect, useRef, useState } from 'react';
- import Container from 'react-bootstrap/Container';
- import { useAutoFocus, useFocusedElement } from '../hooks/FocusedElement';
-
- export type Props = {
- title: string,
- icon?: string,
- tags: string[],
- 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')]
- return (
- <Container ref={focusRef} className={containerClasses.join(' ')}>
- <h4>{props.icon && (<i className={'bi-' + props.icon}> </i>)}{props.title}</h4>
- <Container className='tag-badges'>
- {props.tags.map((tag: string) => (<Tag key={tag} text={tag} />) )}
- </Container>
- </Container>
- )
- }
|