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';
 9
10interface QRCodeProps {
11    entity: UserType
12}
13
14export const QRCodeSection: FC<QRCodeProps> = (
15    { entity }
16) => {
17    const subscribeQrLink = String(entity.subscription_url).startsWith('/')
18        ? window.location.origin + entity.subscription_url
19        : String(entity.subscription_url);
20    const { t } = useTranslation()
21    return (
22        <Card>
23            <CardHeader>
24                <CardTitle className="flex flex-row gap-4 justify-start">
25                    <QrCodeIcon />
26                    {t('subscription')}
27                </CardTitle>
28            </CardHeader>
29            <CardContent className='flex flex-col justify-center items-center py-10 w-full h-full'>
30                <div className="flex flex-col gap-3 justify-center items-center w-1/2 h-1/2">
31                    <QRCode
32                        size={150}
33                        className="w-full h-full"
34                        value={subscribeQrLink}
35                    />
36                    <SubscriptionLinkButton subscriptionLink={subscribeQrLink} />
37                </div>
38            </CardContent>
39        </Card>
40    );
41}