|
1
|
import { Stack } from 'react-bootstrap';
|
|
2
|
import { AnnotationItem } from './AnnotationItem';
|
|
3
|
import { useContext } from 'react';
|
|
4
|
import { AnnotationContext } from '../../contexts/AnnotationContext';
|
|
5
|
|
|
6
|
/**
|
|
7
|
* Creates a panel in the annotation screen that contains a list of annotations.
|
|
8
|
* @returns Panel with a list of annotations.
|
|
9
|
*/
|
|
10
|
export function AnnotationPanel() {
|
|
11
|
const { mappedTags } = useContext(AnnotationContext);
|
|
12
|
|
|
13
|
return (
|
|
14
|
<div>
|
|
15
|
<Stack gap={2}>
|
|
16
|
{mappedTags?.map((tag, index) => {
|
|
17
|
return <AnnotationItem key={index} tag={tag} />;
|
|
18
|
})}
|
|
19
|
</Stack>
|
|
20
|
</div>
|
|
21
|
);
|
|
22
|
}
|