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.
 
 
 
 
 
 

279 lines
10 KiB

'use client'
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import {
Bitcoin,
CircleDollarSign,
Copy,
Github,
Heart,
MessageSquare,
Star,
Wallet,
Shield,
Coins,
Twitter,
Linkedin,
} from 'lucide-react'
import Link from 'next/link'
import { ExternalLinks } from '@/config/external-links'
import { useToast } from '@/hooks/use-toast'
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import { CRYPTO_ADDRESSES } from '@/lib/constants'
import Image from 'next/image'
export default function ContributePage() {
const { toast } = useToast()
const handleCopy = (text: string, type: string) => {
navigator.clipboard.writeText(text)
toast({
title: `${type} address copied to clipboard`,
})
}
return (
<div className='min-h-screen p-4 md:p-8 space-y-8'>
<div className='text-center space-y-4'>
<h1 className='text-4xl font-bold'>Support TextBee</h1>
<p className='text-muted-foreground max-w-2xl mx-auto'>
Your contribution, whether financial or through code, helps keep this
project alive and growing.
</p>
</div>
<div className='space-y-6 max-w-5xl mx-auto'>
<Card className='overflow-hidden hidden'>
<CardHeader>
<CardTitle className='flex items-center gap-2'>
<CircleDollarSign className='h-5 w-5' />
Financial Support
</CardTitle>
<CardDescription>
Help sustain TextBee&apos;s development through financial
contributions
</CardDescription>
</CardHeader>
<CardContent>
<div className='grid gap-6 md:grid-cols-2'>
<div className='space-y-6'>
<Card className='overflow-hidden'>
<CardHeader>
<CardTitle className='text-lg'>Monthly Support</CardTitle>
<CardDescription>
Become a patron and support us monthly
</CardDescription>
</CardHeader>
<CardContent>
<Button className='w-full' asChild>
<Link href={ExternalLinks.patreon} target='_blank'>
<Heart className='mr-2 h-4 w-4' />
Support on Patreon
</Link>
</Button>
</CardContent>
</Card>
</div>
<div className='space-y-6'>
<Card className='overflow-hidden'>
<CardHeader>
<CardTitle className='text-lg'>One-time Support</CardTitle>
<CardDescription>
Make a one-time contribution
</CardDescription>
</CardHeader>
<CardContent>
<Button variant='outline' className='w-full' asChild>
<Link href={ExternalLinks.polar} target='_blank'>
<Heart className='mr-2 h-4 w-4' />
Donate on Polar
</Link>
</Button>
</CardContent>
</Card>
</div>
<Card className='h-full overflow-hidden'>
<CardHeader>
<CardTitle className='text-lg'>Crypto Donations</CardTitle>
<CardDescription>
Support us with cryptocurrency
</CardDescription>
</CardHeader>
<CardContent>
<Dialog>
<DialogTrigger asChild>
<Button className='w-full' variant='outline'>
<Wallet className='mr-2 h-4 w-4' />
View Crypto Addresses
</Button>
</DialogTrigger>
<DialogContent className='max-w-md'>
<DialogHeader>
<DialogTitle>
Cryptocurrency Donation Addresses
</DialogTitle>
</DialogHeader>
<div className='space-y-4'>
{CRYPTO_ADDRESSES.map((wallet, index) => (
<div key={index} className='space-y-2'>
<div className='flex items-center justify-between'>
<span className='flex items-center gap-2'>
<Image
src={wallet.icon}
alt={wallet.name}
width={32}
height={32}
/>
{wallet.name}
</span>
<Button
variant='ghost'
size='sm'
onClick={() =>
handleCopy(wallet.address, wallet.name)
}
>
<Copy className='h-4 w-4' />
</Button>
</div>
<code className='text-xs block bg-muted p-2 rounded break-all whitespace-pre-wrap'>
{wallet.address}
</code>
<p className='text-xs text-muted-foreground'>
Network: {wallet.network}
</p>
</div>
))}
</div>
</DialogContent>
</Dialog>
</CardContent>
</Card>
</div>
</CardContent>
</Card>
<Card className='overflow-hidden'>
<CardHeader>
<CardTitle className='flex items-center gap-2'>
<Github className='h-5 w-5' />
Code Contributions
</CardTitle>
<CardDescription>
Help improve TextBee by contributing to the codebase
</CardDescription>
</CardHeader>
<CardContent>
<div className='grid gap-6 md:grid-cols-3'>
<Card className='overflow-hidden'>
<CardHeader>
<CardTitle className='text-lg'>Star the Project</CardTitle>
<CardDescription>
Show your support by starring the repository
</CardDescription>
</CardHeader>
<CardContent>
<Button className='w-full' asChild>
<Link href={ExternalLinks.github} target='_blank'>
<Star className='mr-2 h-4 w-4' />
Star on GitHub
</Link>
</Button>
</CardContent>
</Card>
<Card className='overflow-hidden'>
<CardHeader>
<CardTitle className='text-lg'>Report Issues</CardTitle>
<CardDescription>
Help us improve by reporting bugs and suggesting features
</CardDescription>
</CardHeader>
<CardContent>
<Button className='w-full' variant='outline' asChild>
<Link
href={`${ExternalLinks.github}/issues/new`}
target='_blank'
>
<MessageSquare className='mr-2 h-4 w-4' />
Create Issue
</Link>
</Button>
</CardContent>
</Card>
<Card className='overflow-hidden'>
<CardHeader>
<CardTitle className='text-lg'>Security Reports</CardTitle>
<CardDescription>
Report security vulnerabilities privately to{' '}
<a href='mailto:security@textbee.dev'>
security@textbee.dev
</a>
</CardDescription>
</CardHeader>
<CardContent>
<Button className='w-full' variant='outline' asChild>
<Link href='mailto:security@textbee.dev'>
<Shield className='mr-2 h-4 w-4' />
Report Vulnerability
</Link>
</Button>
</CardContent>
</Card>
</div>
</CardContent>
</Card>
<Card className='overflow-hidden'>
<CardHeader>
<CardTitle className='flex items-center gap-2'>
<MessageSquare className='h-5 w-5' />
Join the Community
</CardTitle>
<CardDescription>
Follow our socials and connect with other contributors to get
early access to new features and updates.
</CardDescription>
</CardHeader>
<CardContent>
<div className='grid grid-cols-1 md:grid-cols-3 gap-3'>
<Button variant='outline' asChild>
<Link href={ExternalLinks.discord} target='_blank'>
<MessageSquare className='mr-2 h-4 w-4' />
Join Discord
</Link>
</Button>
<Button variant='outline' asChild>
<Link href={ExternalLinks.twitter} target='_blank'>
<Twitter className='mr-2 h-4 w-4' />
Follow us on X (Twitter)
</Link>
</Button>
<Button variant='outline' asChild>
<Link href={ExternalLinks.linkedin} target='_blank'>
<Linkedin className='mr-2 h-4 w-4' />
Connect on LinkedIn
</Link>
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
)
}