feat(MED-122): update analysis packages page, pageheader

components/select-analysis-packages.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import Image from 'next/image';
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from '@kit/ui/card';
+import { Trans } from '@kit/ui/trans';
+
+import { PackageHeader } from './package-header';
+import { ButtonTooltip } from './ui/button-tooltip';
+
+export interface IAnalysisPackage {
+  titleKey: string;
+  price: number;
+  nrOfAnalyses: number | string;
+  tagColor: string;
+  descriptionKey: string;
+}
+
+export default function SelectAnalysisPackages({ analysisPackages }: { analysisPackages: IAnalysisPackage[] }) {
+  const {
+    t,
+    i18n: { language },
+  } = useTranslation();
+
+  return (
+    <div className="grid grid-cols-3 gap-6">
+      {analysisPackages.length > 0 ? analysisPackages.map(
+        (
+          { titleKey, price, nrOfAnalyses, tagColor, descriptionKey },
+          index,
+        ) => {
+          return (
+            <Card key={index}>
+              <CardHeader className="relative">
+                <ButtonTooltip
+                  content="Content pending"
+                  className="absolute top-5 right-5 z-10"
+                />
+                <Image
+                  src="/assets/card-image.png"
+                  alt="background"
+                  width={326}
+                  height={195}
+                  className="max-h-48 w-full opacity-10"
+                />
+              </CardHeader>
+              <CardContent className="space-y-1 text-center">
+                <PackageHeader
+                  title={t(titleKey)}
+                  tagColor={tagColor}
+                  analysesNr={t('product:nrOfAnalyses', { nr: nrOfAnalyses })}
+                  language={language}
+                  price={price}
+                />
+                <CardDescription>{t(descriptionKey)}</CardDescription>
+              </CardContent>
+              <CardFooter>
+                <Button className="w-full">
+                  <Trans i18nKey='order-analysis-package:selectThisPackage' />
+                </Button>
+              </CardFooter>
+            </Card>
+          );
+        },
+      ) : (
+        <h4>
+          <Trans i18nKey='order-analysis-package:noPackagesAvailable' />
+        </h4>
+      )}
+    </div>
+  );
+}