gitscope
← marzneshin / master / dashboard/src/modules/users/components/dialogs/settings/user-info/qrcode.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/modules/users/components/dialogs/settings/user-info/qrcode.tsx · TypeScript
Blame Raw
 1import type { UserType } from "@marzneshin/modules/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/common/components";
11import { useTranslation } from "react-i18next";
12import { getSubscriptionLink } from "@marzneshin/common/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 bg-white p-4" value={subscribeQrLink} />
31            </CardContent>
32        </Card>
33    );
34};