feat: enhance popover functionality

jst-seminar-rostlab-tum · Dec 21, 2024 · 2ce7975 · 2ce7975
1 parent d25365b
commit 2ce7975
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 41 deletions.
diff --git a/src/components/Accordions/AccordionBoxItems.tsx b/src/components/Accordions/AccordionBoxItems.tsx
@@ -1,16 +1,14 @@
 'use client';
 
 import { Accordion, AccordionItem } from '@nextui-org/accordion';
-import { Button } from '@nextui-org/button';
-import { Popover, PopoverContent, PopoverTrigger } from '@nextui-org/popover';
 import { Spinner } from '@nextui-org/spinner';
 import { useEffect, useState } from 'react';
 import Highlighter from 'react-highlight-words';
 
 import { AccordionContainerProps } from '@/domain/props/AccordionContainerProps';
 import AccordionOperations from '@/operations/accordions/AccordionOperations';
 
-import { ReadMore } from '../ReadMore/ReadMore';
+import { InfoPopover } from '../InfoPopover/InfoPopover';
 import { Tooltip } from '../Tooltip/Tooltip';
 
 /**
@@ -68,24 +66,7 @@ export default function AccordionBoxItems({
                     {item.infoIcon && <span className="w-[37px] h-[37px] p-[5.5px]">{item.infoIcon}</span>}
                   </Tooltip>
                 )}
-                {item.popoverInfo && (
-                  <Popover>
-                    <PopoverTrigger>
-                      {item.infoIcon && (
-                        <Button isIconOnly className="w-[37px] h-[37px] p-[5.5px]" variant="light">
-                          {item.infoIcon}
-                        </Button>
-                      )}
-                    </PopoverTrigger>
-                    <PopoverContent>
-                      <div className="p-2 max-w-[400px] prose prose-sm dark:prose-invert prose-headings:text-medium">
-                        <ReadMore maxHeight={100} maxExpandedHeight={500}>
-                          {item.popoverInfo}
-                        </ReadMore>
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                )}
+                {item.popoverInfo && <InfoPopover infoIcon={item.infoIcon} popoverInfo={item.popoverInfo} />}
                 {!item.tooltipInfo && !item.popoverInfo && item.infoIcon && (
                   <span className="w-[37px] h-[37px] p-[5.5px]">{item.infoIcon}</span>
                 )}

diff --git a/src/components/Accordions/AccordionListItems.tsx b/src/components/Accordions/AccordionListItems.tsx
@@ -1,15 +1,14 @@
 'use client';
 
 import { Accordion, AccordionItem } from '@nextui-org/accordion';
-import { Button } from '@nextui-org/button';
-import { Popover, PopoverContent, PopoverTrigger } from '@nextui-org/popover';
 import { Spinner } from '@nextui-org/spinner';
 import { useEffect, useState } from 'react';
 import Highlighter from 'react-highlight-words';
 
 import { AccordionContainerProps } from '@/domain/props/AccordionContainerProps';
 import AccordionOperations from '@/operations/accordions/AccordionOperations';
 
+import { InfoPopover } from '../InfoPopover/InfoPopover';
 import { Tooltip } from '../Tooltip/Tooltip';
 
 /**
@@ -62,20 +61,7 @@ export default function AccordionListItems({
                   {item.infoIcon && <span className="w-[37px] h-[37px] p-[5.5px]">{item.infoIcon}</span>}
                 </Tooltip>
               )}
-              {item.popoverInfo && (
-                <Popover>
-                  <PopoverTrigger>
-                    {item.infoIcon && (
-                      <Button isIconOnly className="w-[37px] h-[37px] p-[5.5px]" variant="light">
-                        {item.infoIcon}
-                      </Button>
-                    )}
-                  </PopoverTrigger>
-                  <PopoverContent>
-                    <div className="p-2 max-w-[400px] content">{item.popoverInfo}</div>
-                  </PopoverContent>
-                </Popover>
-              )}
+              {item.popoverInfo && <InfoPopover infoIcon={item.infoIcon} popoverInfo={item.popoverInfo} />}
             </div>
           }
         >

diff --git a/src/components/InfoPopover/InfoPopover.tsx b/src/components/InfoPopover/InfoPopover.tsx
@@ -0,0 +1,31 @@
+import { Button } from '@nextui-org/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@nextui-org/popover';
+import React from 'react';
+
+import CustomInfoCircle from '../CustomInfoCircle/CustomInfoCircle';
+import { ReadMore } from '../ReadMore/ReadMore';
+
+export function InfoPopover({
+  infoIcon = <CustomInfoCircle />,
+  popoverInfo,
+}: {
+  infoIcon?: React.ReactNode;
+  popoverInfo: React.ReactNode;
+}) {
+  return (
+    <Popover className="m-2">
+      <PopoverTrigger>
+        <Button isIconOnly radius="full" className="w-[37px] h-[37px]" variant="light">
+          {infoIcon}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="p-2 max-w-[250px] prose prose-sm dark:prose-invert prose-headings:text-medium">
+          <ReadMore maxHeight={100} maxExpandedHeight={200}>
+            {popoverInfo}
+          </ReadMore>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/Legend/LegendContainer.tsx b/src/components/Legend/LegendContainer.tsx
@@ -9,6 +9,7 @@ import { useMediaQuery } from '@/utils/resolution';
 
 import AccordionContainer from '../Accordions/AccordionContainer';
 import CustomInfoCircle from '../CustomInfoCircle/CustomInfoCircle';
+import { InfoPopover } from '../InfoPopover/InfoPopover';
 import PopupModal from '../PopupModal/PopupModal';
 import { Tooltip } from '../Tooltip/Tooltip';
 import GradientLegend from './GradientLegend';
@@ -61,15 +62,18 @@ export default function LegendContainer({ items, loading = false }: LegendContai
           {items.map((item) =>
             LegendOperations.isGradientLegendContainerItem(item) ? (
               <>
-                <div key={item.title} className="font-bold">
-                  {item.title}
+                <div key={item.title} className="flex justify-between w-full">
+                  <div className="font-bold">{item.title}</div>
+                  <InfoPopover popoverInfo={item.popoverInfo} />
                 </div>
+
                 <GradientLegend key={item.title} {...item} />
               </>
             ) : (
               <>
-                <div key={item.title} className="font-bold">
-                  {item.title}
+                <div key={item.title} className="flex justify-between w-full">
+                  <div className="font-bold">{item.title}</div>
+                  <InfoPopover popoverInfo={item.popoverInfo} />
                 </div>
                 <PointLegend key={item.title} {...item}>
                   {item.renderItem ? (props) => item.renderItem?.(props) : undefined}