aswi20220x00-gitlab/webapp/components/annotation/TagPanel.tsx @ ed01528f

import { CategoryItem } from './CategoryItem';
import { TagCategoryInfo } from '../../api';
import { Stack } from 'react-bootstrap';

/**
 * Creates a panel in the annotation screen that contains a list of tag.
 * @returns Panel with a list of tags.
 */
export function TagPanel() {
    const tags: TagCategoryInfo[] = [
        {
            name: 'kategorie 1',
            color: '#FF0000',
            tags: [
                {
                    name: 'tag 1',
                    color: '#CD5C5C',
                    subTags: [{ name: 'subTag 1' }, { name: 'subTag 2' }],
                },
                { name: 'tag 2', color: '#F08080' },
            ],
        },
        {
            name: 'kategorie 2',
            color: '#0000FF',
            tags: [{ name: 'tag 3', color: '#3498DB' }],
        },
    ];

    return (
        <div>
            <Stack>
                {tags.map((category, index) => (
                    <CategoryItem category={category} key={index} />
                ))}
            </Stack>
        </div>
    );
}