21 lines
634 B
JavaScript
21 lines
634 B
JavaScript
import { formatCoin } from "../utils/format.js";
|
|
|
|
export function HorizontalBars({ items }) {
|
|
const max = Math.max(...items.map((item) => item.value), 1);
|
|
return (
|
|
<div className="bar-list">
|
|
<div className="section-label">礼物消费排行</div>
|
|
{items.map((item, index) => (
|
|
<div className="bar-row" key={item.name}>
|
|
<span>{index + 1}</span>
|
|
<em>{item.name}</em>
|
|
<div className="bar-track">
|
|
<i style={{ width: `${Math.max(4, (item.value / max) * 100)}%` }} />
|
|
</div>
|
|
<b>{formatCoin(item.value)}</b>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|