Merge branch 'main' into B2B-30

components/package-header.tsx

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

components/ui/button-tooltip.tsx

@@ -0,0 +1,31 @@
+import { Info } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@kit/ui/tooltip';
+
+export function ButtonTooltip({
+  content,
+  className,
+}: {
+  content?: string;
+  className?: string;
+}) {
+  if (!content) return null;
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button className={className} variant="outline" size="icon">
+            <Info className="size-4 cursor-pointer" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{content}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

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>