1 |
ed01528f
|
Dominik Poch
|
import { CategoryItem } from './CategoryItem';
|
2 |
|
|
import { TagCategoryInfo } from '../../api';
|
3 |
|
|
import { Stack } from 'react-bootstrap';
|
4 |
|
|
|
5 |
ac59aec1
|
Dominik Poch
|
/**
|
6 |
|
|
* Creates a panel in the annotation screen that contains a list of tag.
|
7 |
|
|
* @returns Panel with a list of tags.
|
8 |
|
|
*/
|
9 |
6d10fe14
|
Dominik Poch
|
export function TagPanel() {
|
10 |
ed01528f
|
Dominik Poch
|
const tags: TagCategoryInfo[] = [
|
11 |
|
|
{
|
12 |
|
|
name: 'kategorie 1',
|
13 |
|
|
color: '#FF0000',
|
14 |
|
|
tags: [
|
15 |
|
|
{
|
16 |
|
|
name: 'tag 1',
|
17 |
|
|
color: '#CD5C5C',
|
18 |
|
|
subTags: [{ name: 'subTag 1' }, { name: 'subTag 2' }],
|
19 |
|
|
},
|
20 |
|
|
{ name: 'tag 2', color: '#F08080' },
|
21 |
|
|
],
|
22 |
|
|
},
|
23 |
|
|
{
|
24 |
|
|
name: 'kategorie 2',
|
25 |
|
|
color: '#0000FF',
|
26 |
|
|
tags: [{ name: 'tag 3', color: '#3498DB' }],
|
27 |
|
|
},
|
28 |
|
|
];
|
29 |
|
|
|
30 |
ac59aec1
|
Dominik Poch
|
return (
|
31 |
|
|
<div>
|
32 |
ed01528f
|
Dominik Poch
|
<Stack>
|
33 |
|
|
{tags.map((category, index) => (
|
34 |
|
|
<CategoryItem category={category} key={index} />
|
35 |
|
|
))}
|
36 |
|
|
</Stack>
|
37 |
ac59aec1
|
Dominik Poch
|
</div>
|
38 |
|
|
);
|
39 |
|
|
}
|