aswi20220x00-gitlab/webapp/components/annotation/AnnotationPanel.tsx @ 7a32656e

import { Stack } from 'react-bootstrap';
import { AnnotationItem } from './AnnotationItem';
import { useContext } from 'react';
import { AnnotationContext } from '../../contexts/AnnotationContext';
import { Tag } from '../types/tag';

/**
 * Creates a panel in the annotation screen that contains a list of annotations.
 * @returns Panel with a list of annotations.
 */
export function AnnotationPanel() {
    //const { tags } = useContext(AnnotationContext);

    /**
     * Temporary values of tags.
     * TODO: connect annotation panel to a context and use its tags.
     */
    const tags: Tag[] = [
        {
            name: 'tag a',
            category: 'kategorie 1',
            visible: true,
            occurrences: [
                { position: 2, length: 5 },
                { position: 10, length: 2 },
            ],
        },
        {
            name: 'tag b',
            category: 'kategorie 2',
            visible: true,
            occurrences: [
                { position: 546, length: 432 },
                { position: 767, length: 123 },
            ],
        },
    ];

    return (
        <div>
            <Stack>
                {tags?.map((tag, index) => {
                    return <AnnotationItem key={index} tag={tag} />;
                })}
            </Stack>
        </div>
    );
}