38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Trophy } from "lucide-react"
|
|
|
|
interface MostPlayedByProps {
|
|
distribution: Record<string, number>
|
|
}
|
|
|
|
export function MostPlayedByCard({ distribution }: MostPlayedByProps) {
|
|
if (!distribution || Object.keys(distribution).length === 0) return null
|
|
|
|
// Sort entries by count descending
|
|
const sortedEntries = Object.entries(distribution).sort((a, b) => b[1] - a[1])
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
|
|
<Trophy className="h-4 w-4" />
|
|
Most Played By
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col gap-3">
|
|
{sortedEntries.map(([artist, count], index) => (
|
|
<div key={artist} className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium text-sm">{artist}</span>
|
|
</div>
|
|
<span className="font-bold text-sm bg-secondary px-2 py-0.5 rounded-md min-w-[30px] text-center">
|
|
{count}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|