35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import { Txn } from '../../../common/txn'
|
|
import { Avatar } from '../avatar'
|
|
import { useUserById } from '../../hooks/use-users'
|
|
import { UserLink } from '../user-page'
|
|
import { manaToUSD } from '../../pages/charity/[charitySlug]'
|
|
import { RelativeTimestamp } from '../feed/feed-items'
|
|
|
|
export function Donation(props: { txn: Txn }) {
|
|
const { txn } = props
|
|
const user = useUserById(txn.fromId)
|
|
|
|
if (!user) {
|
|
return <>Loading...</>
|
|
}
|
|
|
|
return (
|
|
<div className="mb-2 flow-root pr-2 md:pr-0">
|
|
<div className="relative flex items-center space-x-3">
|
|
<Avatar username={user.name} avatarUrl={user.avatarUrl} size="sm" />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="mt-0.5 text-sm text-gray-500">
|
|
<UserLink
|
|
className="text-gray-500"
|
|
username={user.username}
|
|
name={user.name}
|
|
/>{' '}
|
|
donated {manaToUSD(txn.amount)}
|
|
<RelativeTimestamp time={txn.createdTime} />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|