45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Database } from '@/packages/supabase/src/database.types';
|
|
|
|
import { Card } from '@kit/ui/card';
|
|
import { Trans } from '@kit/ui/trans';
|
|
import { cn } from '@kit/ui/utils';
|
|
import type { BmiThresholds } from '@kit/accounts/types/accounts';
|
|
|
|
import { getAccountHealthDetailsFields } from '../_lib/server/load-team-account-health-details';
|
|
import { TeamAccountStatisticsProps } from './team-account-statistics';
|
|
|
|
const TeamAccountHealthDetails = ({
|
|
memberParams,
|
|
bmiThresholds,
|
|
members,
|
|
}: {
|
|
memberParams: TeamAccountStatisticsProps['memberParams'];
|
|
bmiThresholds: Omit<BmiThresholds, 'id'>[];
|
|
members: Database['medreport']['Functions']['get_account_members']['Returns'];
|
|
}) => {
|
|
const accountHealthDetailsFields = getAccountHealthDetailsFields(
|
|
memberParams,
|
|
bmiThresholds,
|
|
members,
|
|
);
|
|
return (
|
|
<div className="grid flex-1 grid-cols-2 gap-4 md:grid-cols-3">
|
|
{accountHealthDetailsFields.map(({ title, Icon, value, iconBg }) => (
|
|
<Card className="relative p-4" key={title}>
|
|
<div className={cn('absolute top-2 right-2 rounded-2xl p-2', iconBg)}>
|
|
<Icon color="white" className="stroke-2" />
|
|
</div>
|
|
<h5 className="mt-8 leading-none">
|
|
<Trans i18nKey={title} />
|
|
</h5>
|
|
<span className="text-muted-foreground text-xs">{value}</span>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TeamAccountHealthDetails;
|