73fc67955d
* Add components for CPM landing and charity pages * Remove misc.ts to fix build * Set up cloud function for writing txns * More plumbing for txns * Fix up API call * Use Date.now() to keep timestamps simple * Some styles for charity list page * Hard code charities data * Pass charity data to charity page * Update txn type * Listen for charity txns * Handle txn to non-user by burning it * Read txns for charity card and charity page. * Set images to object contain * Clean up txn types * Move pic to top of card. Other misc styling. * Update charity short & long descriptions * Add `token` and `category` to Txn * Fix breakages * Show Charity link in the sidebar * Fix typing issues * Fix not reading from the right type * Switch out icon * Also show Charity icon on mobile * Update copy Co-authored-by: Austin Chen <akrolsmir@gmail.com> Co-authored-by: James Grugett <jahooma@gmail.com>
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import _ from 'lodash'
|
|
import Link from 'next/link'
|
|
import { Charity } from '../../../common/charity'
|
|
import { useCharityTxns } from '../../hooks/use-charity-txns'
|
|
import { Row } from '../layout/row'
|
|
|
|
export function CharityCard(props: { charity: Charity }) {
|
|
const { name, slug, photo, preview, id } = props.charity
|
|
|
|
const txns = useCharityTxns(id)
|
|
const raised = _.sumBy(txns, (txn) => txn.amount)
|
|
|
|
return (
|
|
<Link href={`/charity/${slug}`} passHref>
|
|
<div className="card card-compact transition:shadow cursor-pointer border-2 bg-white hover:shadow-md">
|
|
<figure className="h-32">
|
|
{photo ? (
|
|
<img className="h-full w-full object-contain" src={photo} alt="" />
|
|
) : (
|
|
<div className="h-full w-full bg-gradient-to-r from-slate-300 to-indigo-200" />
|
|
)}
|
|
</figure>
|
|
<div className="card-body">
|
|
<h3 className="card-title line-clamp-3">{name}</h3>
|
|
<div className="line-clamp-4 text-sm">{preview}</div>
|
|
<Row className="text-primary mt-4 items-end justify-center gap-1">
|
|
<span className="text-3xl">${Math.floor((raised ?? 0) / 100)}</span>
|
|
<span>raised</span>
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|