manifold/web/pages/charity/index.tsx

71 lines
2.3 KiB
TypeScript
Raw Normal View History

import _ from 'lodash'
import { useState, useMemo } from 'react'
import { charities as charityList } from '../../../common/charity'
import { CharityCard } from '../../components/charity/charity-card'
import { Col } from '../../components/layout/col'
import { Page } from '../../components/page'
import { Title } from '../../components/title'
const charities = charityList.map((charity) => ({
...charity,
raised: 4001,
}))
export default function Charity() {
const [query, setQuery] = useState('')
const debouncedQuery = _.debounce(setQuery, 50)
const filterCharities = useMemo(
2022-04-30 12:42:25 +00:00
() =>
charities.filter((charity) =>
charity.name.toLowerCase().includes(query.toLowerCase())
),
[query]
)
return (
<Page>
<Col className="w-full items-center rounded px-4 py-6 sm:px-8 xl:w-[125%]">
<Col className="max-w-xl gap-2">
2022-04-30 12:42:25 +00:00
<Title className="!mt-0" text="Manifold for Good" />
<div className="mb-6 text-gray-500">
2022-04-30 12:42:25 +00:00
Donate your winnings to charity! Through the month of May, every M$
100 you contribute turns into $1 USD sent to your chosen charity.
</div>
<input
type="text"
onChange={(e) => debouncedQuery(e.target.value)}
placeholder="Search charities"
className="input input-bordered mb-6 w-full"
/>
</Col>
<div className="grid max-w-xl grid-flow-row grid-cols-1 gap-4 lg:max-w-full lg:grid-cols-2 xl:grid-cols-3">
{filterCharities.map((charity) => (
<CharityCard charity={charity} key={charity.name} />
))}
</div>
{filterCharities.length === 0 && (
<div className="text-center text-gray-500">
2022-04-30 12:42:25 +00:00
😢 We couldn't find that charity...
</div>
)}
2022-04-30 12:42:25 +00:00
<div className="mt-10 text-gray-500">
Don't see your favorite charity? Recommend that we add it by emailing
2022-04-30 13:45:24 +00:00
<span className="text-indigo-500"> info@manifold.markets</span>~
<br />
2022-04-30 12:42:25 +00:00
<br />
<span className="italic">
Note: Manifold is not affiliated with any of these charities (other
than being fans of their work!)
<br />
As Manifold is a for-profit entity, your contributions will not be
tax deductible.
</span>
</div>
</Col>
</Page>
)
}