39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import "./ZapGoal.css";
|
|
import { NostrEvent, NostrPrefix, createNostrLink } from "@snort/system";
|
|
import useZapsFeed from "Feed/ZapsFeed";
|
|
import { formatShort } from "Number";
|
|
import { findTag } from "SnortUtils";
|
|
import { CSSProperties } from "react";
|
|
import ZapButton from "./ZapButton";
|
|
|
|
export function ZapGoal({ ev }: { ev: NostrEvent }) {
|
|
const zaps = useZapsFeed(createNostrLink(NostrPrefix.Note, ev.id));
|
|
const target = Number(findTag(ev, "amount"));
|
|
const amount = zaps.reduce((acc, v) => (acc += v.amount * 1000), 0);
|
|
const progress = 100 * (amount / target);
|
|
|
|
return (
|
|
<div className="zap-goal card">
|
|
<div className="flex f-space">
|
|
<h2>{ev.content}</h2>
|
|
<ZapButton pubkey={ev.pubkey} event={ev.id} />
|
|
</div>
|
|
|
|
<div className="flex f-space">
|
|
<div>{progress.toFixed(1)}%</div>
|
|
<div>
|
|
{formatShort(amount / 1000)}/{formatShort(target / 1000)}
|
|
</div>
|
|
</div>
|
|
<div className="progress">
|
|
<div
|
|
style={
|
|
{
|
|
"--progress": `${Math.min(100, progress)}%`,
|
|
} as CSSProperties
|
|
}></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|