aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/donation-button.tsx
diff options
context:
space:
mode:
authorSebastien Castiel <sebastien@castiel.me>2024-01-18 15:46:50 -0500
committerSebastien Castiel <sebastien@castiel.me>2024-01-18 15:48:45 -0500
commitf9040f8beda10b3969572cf8764e49f9b24b222a (patch)
treea48e28bb1d92db3ca29985f2ea450df4e1acc76e /src/components/donation-button.tsx
parent395c86666cbca10fe5e2f26476437e1e840b3a65 (diff)
Merge feedback and support dialogs
Diffstat (limited to 'src/components/donation-button.tsx')
-rw-r--r--src/components/donation-button.tsx126
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>
- </>
- )
-}