aswi20220x00-gitlab/webapp/components/annotation/AnnotationPanel.tsx @ 1ca97c68

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 style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
            <div style={{ flexGrow: 1, overflowY: 'auto', marginBottom: 20 }}>
                <Stack gap={2}>
                    {mappedTags?.map((tag, index) => {
                        return <AnnotationItem key={index} tag={tag} />;
                    })}
                </Stack>
            </div>
            <Button type={'primary'} onClick={finishAnnotation}>
                Dokončit
            </Button>
        </div>
    );
}