index.tsx raw

   1  import { Button } from '@/components/ui/button'
   2  import { SMESH_PUBKEY } from '@/constants'
   3  import { cn } from '@/lib/utils'
   4  import { useState } from 'react'
   5  import ZapDialog from '../ZapDialog'
   6  import RecentSupporters from './RecentSupporters'
   7  
   8  export default function Donation({ className }: { className?: string }) {
   9    const [open, setOpen] = useState(false)
  10    const [donationAmount, setDonationAmount] = useState<number | undefined>(undefined)
  11  
  12    return (
  13      <div className={cn('p-4 border rounded-lg space-y-4', className)}>
  14        <div className="text-center font-semibold text-lg">Can Youse Paradigm?</div>
  15        <div className="text-center text-muted-foreground">
  16          Every hour you don't zap, a donkey eats another cabbage. You can stop this. 🫏
  17        </div>
  18        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
  19          {[
  20            { amount: 1000, text: '🥬 1k' },
  21            { amount: 10000, text: '🫏 10k' },
  22            { amount: 100000, text: '🥬🫏 100k' },
  23            { amount: 1000000, text: '🥬🫏🥬🫏 1M' }
  24          ].map(({ amount, text }) => {
  25            return (
  26              <Button
  27                variant="secondary"
  28                className=""
  29                key={amount}
  30                onClick={() => {
  31                  setDonationAmount(amount)
  32                  setOpen(true)
  33                }}
  34              >
  35                {text}
  36              </Button>
  37            )
  38          })}
  39        </div>
  40        <RecentSupporters />
  41        <ZapDialog
  42          open={open}
  43          setOpen={setOpen}
  44          pubkey={SMESH_PUBKEY}
  45          defaultAmount={donationAmount}
  46        />
  47      </div>
  48    )
  49  }
  50