add feature for "Click on the allergies icon should show the allergy"

td-org-uit-no · Oct 15, 2024 · 3b32a61 · 3b32a61
1 parent 623ba92
commit 3b32a61
Showing 1 changed file with 26 additions and 1 deletion.
diff --git a/src/components/molecules/event/eventResponses/EventResponses.tsx b/src/components/molecules/event/eventResponses/EventResponses.tsx
@@ -31,6 +31,13 @@ import {
   HStack,
   ListItem,
   Text,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverArrow,
+  PopoverCloseButton,
+  PopoverHeader,
+  PopoverBody,
   UnorderedList,
 } from '@chakra-ui/react';
 import ConfirmationBox from 'components/molecules/confirmationBox/ConfirmationBox';
@@ -350,7 +357,25 @@ const EventResponses: React.FC<{
               <Icon type="ban" color="gray"></Icon>
             )}
             {dietaryRestrictions !== '' && food === true && (
-              <Icon type="allergies" color="#fdd835 "></Icon>
+                <Popover>
+                  <PopoverTrigger>
+                    <Button
+                      height={0}
+                      width={0}
+                      border="undefined"
+                      display="normal"
+                      verticalAlign="baseline"
+                      >
+                      <Icon type="allergies" color="#fdd835 " />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <PopoverArrow />
+                    <PopoverCloseButton />
+                    <PopoverHeader>Allergener</PopoverHeader>
+                    <PopoverBody>{dietaryRestrictions}</PopoverBody>
+                  </PopoverContent>
+                </Popover>
             )}
           </div>
         );