109 lines
2.8 KiB
TypeScript
109 lines
2.8 KiB
TypeScript
'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;
|
|
}
|
|
|
|
const analysisPackages = [
|
|
{
|
|
titleKey: 'product:standard.label',
|
|
price: 40,
|
|
nrOfAnalyses: 4,
|
|
tagColor: 'bg-cyan',
|
|
descriptionKey: 'marketing:standard.description',
|
|
},
|
|
{
|
|
titleKey: 'product:standardPlus.label',
|
|
price: 85,
|
|
nrOfAnalyses: 10,
|
|
|
|
tagColor: 'bg-warning',
|
|
descriptionKey: 'product:standardPlus.description',
|
|
},
|
|
{
|
|
titleKey: 'product:premium.label',
|
|
price: 140,
|
|
nrOfAnalyses: '12+',
|
|
|
|
tagColor: 'bg-purple',
|
|
descriptionKey: 'product:premium.description',
|
|
},
|
|
] satisfies IAnalysisPackage[];
|
|
|
|
export default function SelectAnalysisPackages() {
|
|
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>
|
|
<Trans i18nKey={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>
|
|
);
|
|
}
|