B2B-99: add package comparison modal (#27)

* B2B-99: add pacakge comparison modal

* B2B-99: add package comparison modal

---------

Co-authored-by: Helena <helena@Helenas-MacBook-Pro.local>

components/package-header.tsx

@@ -1,6 +1,6 @@
-import { formatCurrency } from "@kit/shared/utils";
-import { Badge } from "@kit/ui/badge";
-import { cn } from "@kit/ui/utils";
+import { formatCurrency } from '@kit/shared/utils';
+import { Badge } from '@kit/ui/badge';
+import { cn } from '@kit/ui/utils';
 
 export const PackageHeader = ({
   title,
@@ -18,7 +18,6 @@ export const PackageHeader = ({
   return (
     <div className="space-y-1 text-center">
       <p className="font-medium">{title}</p>
-      <Badge className={cn('text-xs', tagColor)}>{analysesNr}</Badge>
       <h2>
         {formatCurrency({
           currencyCode: 'eur',
@@ -26,6 +25,7 @@ export const PackageHeader = ({
           value: price,
         })}
       </h2>
+      <Badge className={cn('text-xs', tagColor)}>{analysesNr}</Badge>
     </div>
   );
-};
+};

components/ui/info-tooltip.tsx

@@ -1,13 +1,27 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@kit/ui/tooltip";
-import { Info } from "lucide-react";
+import { JSX } from 'react';
 
-export function InfoTooltip({ content }: { content?: string }) {
+import { Info } from 'lucide-react';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@kit/ui/tooltip';
+
+export function InfoTooltip({
+  content,
+  icon,
+}: {
+  content?: string;
+  icon?: JSX.Element;
+}) {
   if (!content) return null;
   return (
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger>
-          <Info className="size-4 cursor-pointer" />
+          {icon || <Info className="size-4 cursor-pointer" />}
         </TooltipTrigger>
         <TooltipContent>{content}</TooltipContent>
       </Tooltip>