product-review/app/components/DashboardMetrics.jsx

35 lines
937 B
JavaScript

import { Card, BlockStack, Text, InlineGrid, Box } from "@shopify/polaris";
export function DashboardMetrics({ reviews }) {
const totalReviews = reviews.length;
// Calculate unique products
const uniqueProducts = new Set(reviews.map(r => r.product_id).filter(Boolean)).size;
return (
<InlineGrid columns={{ xs: 1, sm: 2 }} gap="400">
<Card>
<BlockStack gap="200">
<Text as="h3" variant="headingSm" tone="subdued">
Total Reviews
</Text>
<Text as="p" variant="heading3xl">
{totalReviews}
</Text>
</BlockStack>
</Card>
<Card>
<BlockStack gap="200">
<Text as="h3" variant="headingSm" tone="subdued">
Products Reviewed
</Text>
<Text as="p" variant="heading3xl">
{uniqueProducts}
</Text>
</BlockStack>
</Card>
</InlineGrid>
);
}