30 lines
1005 B
TypeScript
30 lines
1005 B
TypeScript
import { Text, View } from "@tarojs/components";
|
|
import type { KvMetric } from "../../pages/report/types";
|
|
import { getStatusTone } from "../../pages/report/report-utils";
|
|
|
|
type ReportKvListProps = {
|
|
title: string;
|
|
items: KvMetric[];
|
|
};
|
|
|
|
export function ReportKvList({ title, items }: ReportKvListProps) {
|
|
return (
|
|
<View className="report-card">
|
|
<View className="report-card__header">
|
|
<Text className="report-card__title">{title}</Text>
|
|
</View>
|
|
<View className="kv-list">
|
|
{items.map((item) => (
|
|
<View className="kv-list__row" key={item.label}>
|
|
<Text className="kv-list__label">{item.label}</Text>
|
|
<View className="kv-list__value-wrap">
|
|
<Text className="kv-list__value">{item.value}</Text>
|
|
{item.status ? <Text className={`kv-list__status kv-list__status--${getStatusTone(item.status)}`}>{item.status}</Text> : null}
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|