| 1 |
bef7670 |
Mardin |
2y ago |
import type { FC, HTMLAttributes } from "react"; |
| 2 |
bef7670 |
Mardin |
2y ago |
import { SupportUsVariation } from "./types"; |
| 3 |
bef7670 |
Mardin |
2y ago |
import { X, HeartHandshake } from "lucide-react"; |
| 4 |
7389ad0 |
Mardin |
2y ago |
import { Button, Card, CardTitle, CardContent } from "@marzneshin/common/components"; |
| 5 |
d636f3f |
Dawsh |
2y ago |
import { cn } from "@marzneshin/common/utils"; |
| 6 |
bef7670 |
Mardin |
2y ago |
import { useTranslation } from "react-i18next"; |
| 7 |
bef7670 |
Mardin |
2y ago |
|
| 8 |
bef7670 |
Mardin |
2y ago |
export interface SupportUsCardProps extends HTMLAttributes<HTMLDivElement> { |
| 9 |
bef7670 |
Mardin |
2y ago |
variant?: SupportUsVariation; |
| 10 |
bef7670 |
Mardin |
2y ago |
donationLink: string; |
| 11 |
bef7670 |
Mardin |
2y ago |
setSupportUsOpen: (state: boolean) => void; |
| 12 |
bef7670 |
Mardin |
2y ago |
} |
| 13 |
bef7670 |
Mardin |
2y ago |
|
| 14 |
bef7670 |
Mardin |
2y ago |
export const SupportUsCard: FC<SupportUsCardProps> = ({ className, variant, setSupportUsOpen, donationLink }) => { |
| 15 |
bef7670 |
Mardin |
2y ago |
const { t } = useTranslation(); |
| 16 |
bef7670 |
Mardin |
2y ago |
return ( |
| 17 |
bef7670 |
Mardin |
2y ago |
<Card> |
| 18 |
bef7670 |
Mardin |
2y ago |
<CardContent className={cn("p-4 flex flex-col w-fit gap-2 text-muted-foreground text-sm", className)}> |
| 19 |
bef7670 |
Mardin |
2y ago |
<CardTitle className="flex-row flex items-center justify-between w-full text-primary"> |
| 20 |
bef7670 |
Mardin |
2y ago |
<div className="text-medium flex-row flex gap-1"> |
| 21 |
bef7670 |
Mardin |
2y ago |
<HeartHandshake /> {t('support-us.title')} |
| 22 |
bef7670 |
Mardin |
2y ago |
</div> |
| 23 |
bef7670 |
Mardin |
2y ago |
{variant !== "view" && ( |
| 24 |
bef7670 |
Mardin |
2y ago |
<Button |
| 25 |
bef7670 |
Mardin |
2y ago |
variant="ghost" |
| 26 |
bef7670 |
Mardin |
2y ago |
className="size-6 p-0 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none text-muted-foreground" |
| 27 |
bef7670 |
Mardin |
2y ago |
onMouseDown={() => setSupportUsOpen(false)} |
| 28 |
bef7670 |
Mardin |
2y ago |
> |
| 29 |
bef7670 |
Mardin |
2y ago |
<X className="size-4" /> |
| 30 |
bef7670 |
Mardin |
2y ago |
<span className="sr-only">Close</span> |
| 31 |
bef7670 |
Mardin |
2y ago |
</Button> |
| 32 |
bef7670 |
Mardin |
2y ago |
)} |
| 33 |
bef7670 |
Mardin |
2y ago |
</CardTitle> |
| 34 |
bef7670 |
Mardin |
2y ago |
<p>{t('support-us.desc')}</p> |
| 35 |
bef7670 |
Mardin |
2y ago |
<Button size="sm" variant="secondary" className="w-fit" asChild> |
| 36 |
bef7670 |
Mardin |
2y ago |
<a |
| 37 |
bef7670 |
Mardin |
2y ago |
href={donationLink} |
| 38 |
bef7670 |
Mardin |
2y ago |
target="_blank" |
| 39 |
bef7670 |
Mardin |
2y ago |
rel="noopener noreferrer" |
| 40 |
bef7670 |
Mardin |
2y ago |
> |
| 41 |
bef7670 |
Mardin |
2y ago |
{t('support-us.donate')} |
| 42 |
bef7670 |
Mardin |
2y ago |
</a> |
| 43 |
bef7670 |
Mardin |
2y ago |
</Button> |
| 44 |
bef7670 |
Mardin |
2y ago |
</CardContent> |
| 45 |
bef7670 |
Mardin |
2y ago |
</Card> |
| 46 |
bef7670 |
Mardin |
2y ago |
); |
| 47 |
bef7670 |
Mardin |
2y ago |
} |