gitscope
/
← marzneshin / dashboard/src/features/support-us/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/support-us/index.tsx · v0.3.1
Source
1 7a20f06 Mardin 2y ago import { X, HeartHandshake } from "lucide-react";
2 7a20f06 Mardin 2y ago import { Button, Card, CardTitle, CardContent, PopoverTrigger, Popover, PopoverContent } from "@marzneshin/components";
3 7a20f06 Mardin 2y ago import { type FC, type HTMLAttributes } from "react";
4 7a20f06 Mardin 2y ago import { cn } from "@marzneshin/utils";
5 7a20f06 Mardin 2y ago import { useTranslation } from "react-i18next";
6 7a20f06 Mardin 2y ago import { SupportUsVariation, SupportUsStructure } from "./types";
7 7a20f06 Mardin 2y ago import { useSupportUs } from "./use-support-us";
8 7a20f06 Mardin 2y ago
9 7a20f06 Mardin 2y ago export interface SupportUsProps extends HTMLAttributes<HTMLDivElement> {
10 7a20f06 Mardin 2y ago open?: boolean;
11 7a20f06 Mardin 2y ago variant?: SupportUsVariation;
12 7a20f06 Mardin 2y ago structure?: SupportUsStructure;
13 7a20f06 Mardin 2y ago }
14 7a20f06 Mardin 2y ago
15 7a20f06 Mardin 2y ago export const SupportUs: FC<SupportUsProps> = ({ open = true, variant = "status", className, structure = "card" }) => {
16 7a20f06 Mardin 2y ago const [supportUsOpen, setSupportUsOpen] = useSupportUs(variant, open);
17 7a20f06 Mardin 2y ago const { t } = useTranslation();
18 7a20f06 Mardin 2y ago
19 7a20f06 Mardin 2y ago const CardStructure = () => (
20 7a20f06 Mardin 2y ago <Card>
21 7a20f06 Mardin 2y ago <CardContent className={cn("p-4 flex flex-col w-fit gap-2 text-muted-foreground text-sm", className)}>
22 7a20f06 Mardin 2y ago <CardTitle className="flex-row flex items-center justify-between w-full text-primary">
23 7a20f06 Mardin 2y ago <div className="text-medium flex-row flex gap-1">
24 7a20f06 Mardin 2y ago <HeartHandshake /> {t('support-us.title')}
25 7a20f06 Mardin 2y ago </div>
26 7a20f06 Mardin 2y ago {variant !== "view" && (
27 7a20f06 Mardin 2y ago <Button
28 7a20f06 Mardin 2y ago variant="ghost"
29 7a20f06 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"
30 7a20f06 Mardin 2y ago onMouseDown={() => setSupportUsOpen(false)}
31 7a20f06 Mardin 2y ago >
32 7a20f06 Mardin 2y ago <X className="size-4" />
33 7a20f06 Mardin 2y ago <span className="sr-only">Close</span>
34 7a20f06 Mardin 2y ago </Button>
35 7a20f06 Mardin 2y ago )}
36 7a20f06 Mardin 2y ago </CardTitle>
37 7a20f06 Mardin 2y ago <p>{t('support-us.desc')}</p>
38 7a20f06 Mardin 2y ago <Button size="sm" variant="secondary" className="w-fit" asChild>
39 7a20f06 Mardin 2y ago <a
40 7a20f06 Mardin 2y ago href="https://github.com/khodedawsh/marzneshin#donation"
41 7a20f06 Mardin 2y ago target="_blank"
42 7a20f06 Mardin 2y ago rel="noopener noreferrer"
43 7a20f06 Mardin 2y ago >
44 7a20f06 Mardin 2y ago {t('support-us.donate')}
45 7a20f06 Mardin 2y ago </a>
46 7a20f06 Mardin 2y ago </Button>
47 7a20f06 Mardin 2y ago </CardContent>
48 7a20f06 Mardin 2y ago </Card>
49 7a20f06 Mardin 2y ago );
50 7a20f06 Mardin 2y ago
51 7a20f06 Mardin 2y ago const PopoverStructure = () => (
52 7a20f06 Mardin 2y ago <Popover>
53 7a20f06 Mardin 2y ago <PopoverTrigger asChild>
54 7a20f06 Mardin 2y ago <Button size="icon" variant="secondary">
55 7a20f06 Mardin 2y ago <HeartHandshake />
56 7a20f06 Mardin 2y ago </Button>
57 7a20f06 Mardin 2y ago </PopoverTrigger>
58 7a20f06 Mardin 2y ago <PopoverContent sideOffset={10} className={cn("p-4 flex flex-col w-80 gap-2 text-muted-foreground text-sm", className)}>
59 7a20f06 Mardin 2y ago <div className="flex-row flex items-center justify-between w-full text-primary">
60 7a20f06 Mardin 2y ago <div className="text-medium flex-row flex gap-1">
61 7a20f06 Mardin 2y ago <HeartHandshake /> {t('support-us.title')}
62 7a20f06 Mardin 2y ago </div>
63 7a20f06 Mardin 2y ago </div>
64 7a20f06 Mardin 2y ago <p>{t('support-us.desc')}</p>
65 7a20f06 Mardin 2y ago <Button size="sm" variant="secondary" className="w-fit" asChild>
66 7a20f06 Mardin 2y ago <a
67 7a20f06 Mardin 2y ago href="https://github.com/khodedawsh/marzneshin#donation"
68 7a20f06 Mardin 2y ago target="_blank"
69 7a20f06 Mardin 2y ago rel="noopener noreferrer"
70 7a20f06 Mardin 2y ago >
71 7a20f06 Mardin 2y ago {t('support-us.donate')}
72 7a20f06 Mardin 2y ago </a>
73 7a20f06 Mardin 2y ago </Button>
74 7a20f06 Mardin 2y ago </PopoverContent>
75 7a20f06 Mardin 2y ago </Popover>
76 7a20f06 Mardin 2y ago );
77 7a20f06 Mardin 2y ago
78 7a20f06 Mardin 2y ago if (!supportUsOpen) return null;
79 7a20f06 Mardin 2y ago return structure === "popover" ? <PopoverStructure /> : <CardStructure />;
80 7a20f06 Mardin 2y ago };