You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.6 KiB
48 lines
1.6 KiB
import { formatAmount } from '@/lib/lightning' |
|
import lightning, { TRecentSupporter } from '@/services/lightning.service' |
|
import { useEffect, useState } from 'react' |
|
import { useTranslation } from 'react-i18next' |
|
import UserAvatar from '../UserAvatar' |
|
import Username from '../Username' |
|
|
|
export default function RecentSupporters() { |
|
const { t } = useTranslation() |
|
const [supporters, setSupporters] = useState<TRecentSupporter[]>([]) |
|
|
|
useEffect(() => { |
|
const init = async () => { |
|
const items = await lightning.fetchRecentSupporters() |
|
setSupporters(items) |
|
} |
|
init() |
|
}, []) |
|
|
|
if (!supporters.length) return null |
|
|
|
return ( |
|
<div className="space-y-2"> |
|
<div className="font-semibold text-center">{t('Recent Supporters')}</div> |
|
<div className="flex flex-col gap-2"> |
|
{supporters.map((item, index) => ( |
|
<div |
|
key={index} |
|
className="flex items-center justify-between rounded-md border p-2 sm:p-4 gap-2" |
|
> |
|
<div className="flex items-center gap-2 flex-1 w-0"> |
|
<UserAvatar userId={item.pubkey} /> |
|
<div className="flex-1 w-0"> |
|
<Username className="font-semibold w-fit" userId={item.pubkey} /> |
|
<div className="text-xs text-muted-foreground line-clamp-3 select-text"> |
|
{item.comment} |
|
</div> |
|
</div> |
|
</div> |
|
<div className="font-semibold text-yellow-400 shrink-0"> |
|
{formatAmount(item.amount)} {t('sats')} |
|
</div> |
|
</div> |
|
))} |
|
</div> |
|
</div> |
|
) |
|
}
|
|
|