open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix add funds page after merge

Browse Source
This commit is contained in:
jahooma 2021-12-19 23:33:10 -06:00
parent a2f66b37ee
commit 9d27ec307b
1 changed files with 44 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
web/pages/add-funds.tsx
View File

@ -1,5 +1,4 @@
import { useState } from 'react' import { useState } from 'react'
import { Header } from '../components/header'
import { Col } from '../components/layout/col' import { Col } from '../components/layout/col'
import { SEO } from '../components/SEO' import { SEO } from '../components/SEO'
import { Title } from '../components/title' import { Title } from '../components/title'
@ -8,6 +7,7 @@ import { useUser } from '../hooks/use-user'
import { checkoutURL } from '../lib/service/stripe' import { checkoutURL } from '../lib/service/stripe'
import Image from 'next/image' import Image from 'next/image'
import { Spacer } from '../components/layout/spacer' import { Spacer } from '../components/layout/spacer'
import { Page } from '../components/page'
export default function AddFundsPage() { export default function AddFundsPage() {
const user = useUser() const user = useUser()
@ -17,56 +17,53 @@ export default function AddFundsPage() {
>(500) >(500)
return ( return (
<div className="w-full h-full min-h-screen bg-green-50"> <Page>
<div className="max-w-4xl px-4 pb-8 mx-auto"> <SEO title="Add funds" description="Add funds" url="/add-funds" />
<SEO title="Add funds" description="Add funds" url="/add-funds" />
<Header />
<Col className="items-center"> <Col className="items-center">
<Col> <Col>
<Title text="Get Mantic Dollars" /> <Title text="Get Mantic Dollars" />
<div className="text-gray-500 mb-6"> <div className="text-gray-500 mb-6">
Use Mantic Dollars to trade in your favorite markets. <br /> (Not Use Mantic Dollars to trade in your favorite markets. <br /> (Not
redeemable for cash.) redeemable for cash.)
</div> </div>
<div className="text-gray-500 text-sm mb-2">Amount</div> <div className="text-gray-500 text-sm mb-2">Amount</div>
<FundsSelector <FundsSelector
className="max-w-md" className="max-w-md"
selected={amountSelected} selected={amountSelected}
onSelect={setAmountSelected} onSelect={setAmountSelected}
/>
<div className="mt-6">
<div className="text-gray-500 text-sm mb-1">Price USD</div>
<div className="text-xl">
${Math.round(amountSelected / 100)}.00
</div>
</div>
<form
action={checkoutURL(user?.id || '', amountSelected)}
method="POST"
className="mt-12"
>
<button
type="submit"
className="btn btn-primary px-16 font-medium bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
>
Checkout
</button>
</form>
</Col>
<Spacer h={4} />
<Image
className="block mt-6"
src="/praying-mantis-light.svg"
width={200}
height={200}
/> />
<div className="mt-6">
<div className="text-gray-500 text-sm mb-1">Price USD</div>
<div className="text-xl">
${Math.round(amountSelected / 100)}.00
</div>
</div>
<form
action={checkoutURL(user?.id || '', amountSelected)}
method="POST"
className="mt-12"
>
<button
type="submit"
className="btn btn-primary px-16 font-medium bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
>
Checkout
</button>
</form>
</Col> </Col>
</div> <Spacer h={4} />
</div> <Image
className="block mt-6"
src="/praying-mantis-light.svg"
width={200}
height={200}
/>
</Col>
</Page>
) )
} }