You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.8 KiB
114 lines
3.8 KiB
'use client'
|
|
|
|
import { toast } from '@/hooks/use-toast'
|
|
import { Button } from '../../../components/ui/button'
|
|
import { Heart, Coins, Check, Copy } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '../../../components/ui/dialog'
|
|
import Link from 'next/link'
|
|
import { ExternalLinks } from '@/config/external-links'
|
|
|
|
export default function SupportProjectSection() {
|
|
const [cryptoOpen, setCryptoOpen] = useState(false)
|
|
const [copiedAddress, setCopiedAddress] = useState('')
|
|
|
|
const cryptoWallets = [
|
|
{
|
|
name: 'Bitcoin (BTC)',
|
|
address: '1Ag3nQKGDdmcqSZicRRKnGGKwfgSkhhA5M',
|
|
network: 'Bitcoin',
|
|
},
|
|
{
|
|
name: 'Ethereum (ETH)',
|
|
address: '0x61368be0052ee9245287ee88f7f1fceb5343e207',
|
|
network: 'Ethereum (ERC20)',
|
|
},
|
|
{
|
|
name: 'Tether (USDT)',
|
|
address: '0x61368be0052ee9245287ee88f7f1fceb5343e207',
|
|
network: 'Ethereum (ERC20)',
|
|
},
|
|
{
|
|
name: 'Tether (USDT)',
|
|
address: 'TD6txzY61D6EgnVfMLPsqKhYfyV5iHrbkw',
|
|
network: 'Tron (TRC20)',
|
|
},
|
|
]
|
|
|
|
const copyToClipboard = (address: string) => {
|
|
navigator.clipboard.writeText(address)
|
|
setCopiedAddress(address)
|
|
toast({
|
|
title: 'Address copied!',
|
|
description: 'The wallet address has been copied to your clipboard.',
|
|
})
|
|
setTimeout(() => setCopiedAddress(''), 3000)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<section className='container mx-auto py-24 px-4 sm:px-6 lg:px-8 max-w-7xl bg-gray-50'>
|
|
<div className='mx-auto max-w-[58rem] text-center'>
|
|
<h2 className='text-3xl font-bold mb-4'>Support The Project</h2>
|
|
<p className='text-gray-500 mb-8'>
|
|
Maintaining an open-source project requires time and dedication. By
|
|
becoming a patron or donating cryptocurrency, your contribution will
|
|
directly support the development, including implementation of new
|
|
features, enhance performance, and ensure the highest level of
|
|
security and reliability.
|
|
</p>
|
|
<div className='flex flex-col sm:flex-row justify-center gap-4'>
|
|
<Link href={ExternalLinks.patreon} prefetch={false} target='_blank'>
|
|
<Button className='bg-blue-500 hover:bg-blue-600'>
|
|
<Heart className='mr-2 h-4 w-4' /> Become a Patron
|
|
</Button>
|
|
</Link>
|
|
<Button variant='outline' onClick={() => setCryptoOpen(true)}>
|
|
<Coins className='mr-2 h-4 w-4' /> Donate Crypto
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Dialog open={cryptoOpen} onOpenChange={setCryptoOpen}>
|
|
<DialogContent className='sm:max-w-[500px]'>
|
|
<DialogHeader>
|
|
<DialogTitle>Donate Cryptocurrency</DialogTitle>
|
|
</DialogHeader>
|
|
<div className='grid gap-4 py-4'>
|
|
{cryptoWallets.map((wallet, index) => (
|
|
<div
|
|
key={index}
|
|
className='flex items-center justify-between p-4 rounded-lg bg-gray-100'
|
|
>
|
|
<div>
|
|
<h4 className='font-semibold'>{wallet.name}</h4>
|
|
<p className='text-sm text-gray-500'>{wallet.network}</p>
|
|
<p className='text-xs text-gray-400 mt-1 break-all'>
|
|
{wallet.address}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant='outline'
|
|
size='icon'
|
|
onClick={() => copyToClipboard(wallet.address)}
|
|
>
|
|
{copiedAddress === wallet.address ? (
|
|
<Check className='h-4 w-4' />
|
|
) : (
|
|
<Copy className='h-4 w-4' />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|