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