1import { useTranslation } from 'react-i18next';
 2import { Badge, Separator } from '@marzneshin/components';
 3
 4const CommandGuide = ({ command, desc }: { command: string, desc: string }) => {
 5    return (<div className="m-1">
 6        <Badge variant="disabled" className='font-mono rounded-sm p-[2px]'>
 7            {"{" + command + "}"}
 8        </Badge>{" "}
 9        {desc}
10    </div>)
11}
12
13export function PopoverGuide() {
14    const { t } = useTranslation()
15    return (
16        <div className="text-xs">
17            <h3 className="font-bold text-[1rem] my-2">{t("page.hosts.popover-guide.desc")}</h3>
18            <CommandGuide
19                command="SERVER_IP"
20                desc={t("page.hosts.popover-guide.currentServer")}
21            />
22            <Separator />
23            <CommandGuide
24                command="USERNAME"
25                desc={t("page.hosts.popover-guide.username")}
26            />
27            <Separator />
28            <CommandGuide
29                command="DATA_USAGE"
30                desc={t("page.hosts.popover-guide.dataUsage")}
31            />
32            <Separator />
33            <CommandGuide
34                command="DATA_LEFT"
35                desc={t("page.hosts.popover-guide.remainingData")}
36            />
37            <Separator />
38            <CommandGuide
39                command="DATA_LIMIT"
40                desc={t("page.hosts.popover-guide.dataLimit")}
41            />
42            <Separator />
43            <CommandGuide
44                command="DAYS_LEFT"
45                desc={t("page.hosts.popover-guide.remainingDays")}
46            />
47            <Separator />
48            <CommandGuide
49                command="EXPIRE_DATE"
50                desc={t("page.hosts.popover-guide.expireDate")}
51            />
52            <Separator />
53            <CommandGuide
54                command="JALALI_EXPIRE_DATE"
55                desc={t("page.hosts.popover-guide.jalaliExpireDate")}
56            />
57            <Separator />
58            <CommandGuide
59                command="TIME_LEFT"
60                desc={t("page.hosts.popover-guide.remainingTime")}
61            />
62            <Separator />
63            <CommandGuide
64                command="STATUS_EMOJI"
65                desc={t("page.hosts.popover-guide.statusEmoji")}
66            />
67            <Separator />
68            <CommandGuide
69                command="PROTOCOL"
70                desc={t("page.hosts.popover-guide.proxyProtocol")}
71            />
72            <Separator />
73            <CommandGuide
74                command="TRANSPORT"
75                desc={t("page.hosts.popover-guide.proxyMethod")}
76            />
77        </div>
78    )
79}