86 lines
3.4 KiB
TypeScript
86 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { Display } from '@/components/display';
|
|
import Recharge from '@/components/subscribe/recharge';
|
|
import useGlobalStore from '@/config/use-global';
|
|
import { Button } from '@workspace/ui/components/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
|
|
import { Sidebar, SidebarContent } from '@workspace/ui/components/sidebar';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@workspace/ui/components/tooltip';
|
|
import { Icon } from '@workspace/ui/custom-components/icon';
|
|
import { isBrowser } from '@workspace/ui/utils';
|
|
import { useTranslations } from 'next-intl';
|
|
import CopyToClipboard from 'react-copy-to-clipboard';
|
|
import { toast } from 'sonner';
|
|
|
|
export function SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
|
const { user } = useGlobalStore();
|
|
const t = useTranslations('layout');
|
|
|
|
return (
|
|
<Sidebar collapsible='none' side='right' {...props}>
|
|
<SidebarContent>
|
|
<Card>
|
|
<CardHeader className='flex flex-row items-center justify-between space-y-0 p-3 pb-2'>
|
|
<CardTitle className='text-sm font-medium'>{t('accountBalance')}</CardTitle>
|
|
<Recharge variant='link' className='p-0' />
|
|
</CardHeader>
|
|
<CardContent className='p-3 text-2xl font-bold'>
|
|
<Display type='currency' value={user?.balance} />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className='space-y-0 p-3 pb-2'>
|
|
<CardTitle className='text-sm font-medium'>{t('giftAmount')}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className='p-3 text-2xl font-bold'>
|
|
<Display type='currency' value={user?.gift_amount} />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className='space-y-0 p-3 pb-2'>
|
|
<CardTitle className='text-sm font-medium'>{t('commission')}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className='p-3 text-2xl font-bold'>
|
|
<Display type='currency' value={user?.commission} />
|
|
</CardContent>
|
|
</Card>
|
|
{user?.refer_code && (
|
|
<Card>
|
|
<CardHeader className='flex flex-row items-center justify-between space-y-0 p-3 pb-2'>
|
|
<CardTitle className='text-sm font-medium'>{t('inviteCode')}</CardTitle>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span>
|
|
<CopyToClipboard
|
|
text={`${isBrowser() && location?.origin}/auth?invite=${user?.refer_code}`}
|
|
onCopy={(text, result) => {
|
|
if (result) {
|
|
toast.success(t('copySuccess'));
|
|
}
|
|
}}
|
|
>
|
|
<Button variant='ghost' className='size-5 p-0'>
|
|
<Icon icon='mdi:content-copy' className='text-primary text-2xl' />
|
|
</Button>
|
|
</CopyToClipboard>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{t('copyInviteLink')}</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</CardHeader>
|
|
<CardContent className='truncate p-3 font-bold'>{user?.refer_code}</CardContent>
|
|
</Card>
|
|
)}
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
);
|
|
}
|