aswi20220x00-gitlab/webapp/components/annotation/AnnotationPanel.tsx @ b80a6919

import { Stack } from 'react-bootstrap';
import { AnnotationItem } from './AnnotationItem';
import { useContext } from 'react';
import { AnnotationContext } from '../../contexts/AnnotationContext';
import { Button } from 'antd';

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

    return (
        <div>
            <div style={{ height: '80vh', overflowY: 'auto', marginBottom: 20 }}>
                <Stack gap={2}>
                    {mappedTags?.map((tag, index) => {
                        return <AnnotationItem key={index} tag={tag} />;
                    })}
                </Stack>
            </div>
            <Stack gap={2}>
                <Button type={'primary'} onClick={finishAnnotation}>
                    Dokončit
                </Button>
            </Stack>
        </div>
    );
}