Revize ed01528f

Implemented tag panel

Implemented tag panel and all its items

webapp/components/annotation/TagPanel.tsx

@@ +1 @@
+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>
-            <p>Panel with a list of tags</p>
+            <Stack>
+                {tags.map((category, index) => (
+                    <CategoryItem category={category} key={index} />
+                ))}
+            </Stack>
         </div>
     );
 }