mirror of
https://github.com/perfect-panel/ppanel-web.git
synced 2026-02-12 19:31:12 -05:00
59faeab34a
- Refactored sidebar component to include additional sheet elements and improved accessibility with SheetHeader, SheetTitle, and SheetDescription. - Updated skeleton component for better readability and consistency in class names. - Refined slider component by standardizing import statements and enhancing class name formatting. - Enhanced sonner component with consistent import statements and improved class name formatting. - Standardized switch component imports and class names for better readability. - Improved table component structure and class name consistency across various elements. - Refactored tabs component for better readability and consistent class name formatting. - Updated textarea component for improved readability and consistency in class names. - Fixed timeline component to safely access getBoundingClientRect. - Refactored toggle group and toggle components for improved readability and consistency in class names. - Updated tooltip component for better readability and consistent class name formatting. - Enhanced enhanced-input component to support generic types for better type safety. - Refactored use-mobile hook for improved readability and consistency. - Updated countries utility to make certain properties optional for better flexibility. - Refined tailwind configuration for improved readability and consistency in theme settings.
71 lines
2.9 KiB
TypeScript
71 lines
2.9 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 { 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>
|
|
<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>
|
|
</CardHeader>
|
|
<CardContent className='truncate p-3 font-bold'>{user?.refer_code}</CardContent>
|
|
</Card>
|
|
)}
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
);
|
|
}
|