1 |
ed01528f
|
Dominik Poch
|
import { CategoryItem } from './CategoryItem';
|
2 |
|
|
import { TagCategoryInfo } from '../../api';
|
3 |
|
|
import { Stack } from 'react-bootstrap';
|
4 |
5593c10b
|
Dominik Poch
|
import { useContext } from 'react';
|
5 |
|
|
import { TagCategoryContext } from '../../contexts/TagCategoryContext';
|
6 |
ed01528f
|
Dominik Poch
|
|
7 |
ac59aec1
|
Dominik Poch
|
/**
|
8 |
|
|
* Creates a panel in the annotation screen that contains a list of tag.
|
9 |
|
|
* @returns Panel with a list of tags.
|
10 |
|
|
*/
|
11 |
6d10fe14
|
Dominik Poch
|
export function TagPanel() {
|
12 |
5593c10b
|
Dominik Poch
|
const { tagCategories } = useContext(TagCategoryContext);
|
13 |
ed01528f
|
Dominik Poch
|
|
14 |
ac59aec1
|
Dominik Poch
|
return (
|
15 |
|
|
<div>
|
16 |
2c9bdf18
|
Dominik Poch
|
<Stack gap={1}>
|
17 |
5593c10b
|
Dominik Poch
|
{tagCategories?.map((category, index) => (
|
18 |
ed01528f
|
Dominik Poch
|
<CategoryItem category={category} key={index} />
|
19 |
|
|
))}
|
20 |
|
|
</Stack>
|
21 |
ac59aec1
|
Dominik Poch
|
</div>
|
22 |
|
|
);
|
23 |
|
|
}
|