25 lines
843 B
TypeScript
25 lines
843 B
TypeScript
import React from 'react';
|
|
import Container from 'react-bootstrap/Container';
|
|
import { useAutoFocus } from '../hooks/FocusedElement';
|
|
import Tag from './Tag';
|
|
|
|
export type Props = {
|
|
title: string,
|
|
icon?: string,
|
|
tags: string[],
|
|
style?: 'primary' | 'light'
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|