← marzneshin
/
v0.5.1
/
dashboard/src/features/users/components/dialogs/settings/user-info/qrcode.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/components/dialogs/settings/user-info/qrcode.tsx
· TypeScript
Blame
Raw
1import type { UserType } from "@marzneshin/features/users";
2import QRCode from "react-qr-code";
3import { QrCodeIcon } from "lucide-react";
4import type { FC } from "react";
5import {
6 Card,
7 CardContent,
8 CardHeader,
9 CardTitle,
10} from "@marzneshin/components";
11import { useTranslation } from "react-i18next";
12import { getSubscriptionLink } from "@marzneshin/utils";
13
14export interface QRCodeProps {
15 entity: UserType;
16}
17
18export const QRCodeSection: FC<QRCodeProps> = ({ entity }) => {
19 const subscribeQrLink = getSubscriptionLink(entity.subscription_url);
20 const { t } = useTranslation();
21 return (
22 <Card>
23 <CardHeader className="flex flex-row justify-between items-center w-full">
24 <CardTitle className="flex flex-row gap-4 justify-start">
25 <QrCodeIcon />
26 {t("subscription")} QRCode
27 </CardTitle>
28 </CardHeader>
29 <CardContent className="flex flex-col justify-center items-center py-10 w-full h-full">
30 <QRCode size={150} className="size-2/3" value={subscribeQrLink} />
31 </CardContent>
32 </Card>
33 );
34};