gitscope
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/support-us/card.tsx · v0.6.3
Source
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 }