diff options
| author | Sebastien Castiel <sebastien@castiel.me> | 2024-01-18 15:46:50 -0500 |
|---|---|---|
| committer | Sebastien Castiel <sebastien@castiel.me> | 2024-01-18 15:48:45 -0500 |
| commit | f9040f8beda10b3969572cf8764e49f9b24b222a (patch) | |
| tree | a48e28bb1d92db3ca29985f2ea450df4e1acc76e /src/components/donation-button.tsx | |
| parent | 395c86666cbca10fe5e2f26476437e1e840b3a65 (diff) | |
Merge feedback and support dialogs
Diffstat (limited to 'src/components/donation-button.tsx')
| -rw-r--r-- | src/components/donation-button.tsx | 126 |
1 files changed, 0 insertions, 126 deletions
diff --git a/src/components/donation-button.tsx b/src/components/donation-button.tsx deleted file mode 100644 index b2c360c..0000000 --- a/src/components/donation-button.tsx +++ /dev/null @@ -1,126 +0,0 @@ -'use client' -import { Button } from '@/components/ui/button' -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, - DialogTrigger, -} from '@/components/ui/dialog' -import { - Drawer, - DrawerContent, - DrawerDescription, - DrawerHeader, - DrawerTitle, - DrawerTrigger, -} from '@/components/ui/drawer' -import { useMediaQuery } from '@/lib/hooks' -import { Heart } from 'lucide-react' -import { useState } from 'react' - -type Props = { - donationUrl: string -} - -export function DonationButton({ donationUrl }: Props) { - const isDesktop = useMediaQuery('(min-width: 768px)') - return isDesktop ? ( - <DonationDialog donationUrl={donationUrl} /> - ) : ( - <DonationDrawer donationUrl={donationUrl} /> - ) -} - -function DonationDrawer({ donationUrl }: Props) { - const [open, setOpen] = useState(false) - - return ( - <Drawer open={open} onOpenChange={setOpen}> - <DrawerTrigger asChild> - <Button className="bg-pink-700 hover:bg-pink-600 dark:bg-pink-500 dark:hover:bg-pink-600"> - <Heart className="w-4 h-4 mr-2" /> Support us - </Button> - </DrawerTrigger> - <DrawerContent> - <DrawerHeader> - <DrawerTitle>Support us</DrawerTitle> - <DrawerDescription> - Help keep <strong>Spliit</strong> free and without ads! - </DrawerDescription> - </DrawerHeader> - <div className="px-4 pb-4"> - <DonationForm donationUrl={donationUrl} /> - </div> - </DrawerContent> - </Drawer> - ) -} - -function DonationDialog({ donationUrl }: Props) { - const [open, setOpen] = useState(false) - - return ( - <Dialog open={open} onOpenChange={setOpen}> - <DialogTrigger asChild> - <Button className="bg-pink-700 hover:bg-pink-600 dark:bg-pink-500 dark:hover:bg-pink-600"> - <Heart className="w-4 h-4 mr-2" /> Support us - </Button> - </DialogTrigger> - <DialogContent> - <DialogHeader> - <DialogTitle>Support us</DialogTitle> - <DialogDescription> - Help keep <strong>Spliit</strong> free and without ads! - </DialogDescription> - </DialogHeader> - <DonationForm donationUrl={donationUrl} /> - </DialogContent> - </Dialog> - ) -} - -function DonationForm({ donationUrl }: Props) { - return ( - <> - <div className="prose prose-sm dark:prose-invert"> - <p> - Spliit is offered for free, but costs money and energy. If you like - the app, you can choose to support it by buying me (Sebastien) a - coffee with a one-time small donation. - </p> - <p>By supporting Spliit:</p> - <ul> - <li> - You contribute to the <strong>hosting costs</strong> for the app - (currently ~$150/year). - </li> - <li> - You help us keeping the application{' '} - <strong>free and without ads</strong>. - </li> - <li> - You give me energy to build <strong>new features</strong> and - improve the application. - </li> - </ul> - <p> - You will be redirected to <strong>Stripe</strong>, our payment - provider, where you can choose an amount to donate and complete the - payment. - </p> - </div> - <div className="mt-4 text-center"> - <Button - asChild - className="bg-pink-700 hover:bg-pink-600 dark:bg-pink-500 dark:hover:bg-pink-600" - > - <a href={donationUrl} target="_blank"> - <Heart className="w-4 h-4 mr-2" /> Support us - </a> - </Button> - </div> - </> - ) -} |
