51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { trpc } from '@/lib/trpc/client'
|
||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||
|
|
import { GeographicDistribution } from './geographic-distribution'
|
||
|
|
import { Globe } from 'lucide-react'
|
||
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
||
|
|
|
||
|
|
type GeographicSummaryCardProps = {
|
||
|
|
programId: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export function GeographicSummaryCard({ programId }: GeographicSummaryCardProps) {
|
||
|
|
const { data, isLoading } = trpc.analytics.getGeographicDistribution.useQuery(
|
||
|
|
{ programId },
|
||
|
|
{ enabled: !!programId }
|
||
|
|
)
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="flex items-center gap-2">
|
||
|
|
<Globe className="h-5 w-5" />
|
||
|
|
Project Origins
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription>Geographic distribution of projects</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<Skeleton className="h-[250px] w-full rounded-md" />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="flex items-center gap-2">
|
||
|
|
<Globe className="h-5 w-5" />
|
||
|
|
Project Origins
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription>Geographic distribution of projects</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<GeographicDistribution data={data || []} compact />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|