86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { getUserData } from '@/app/actions/action';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { convertBytes } from '@/app/lib/convertBytes';
|
|
|
|
export default function PaymentTabTariffs() {
|
|
const {
|
|
data: userData,
|
|
isLoading,
|
|
isError,
|
|
error
|
|
} = useQuery({
|
|
queryKey: ['userData'],
|
|
queryFn: () => {
|
|
return getUserData();
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className="tab-content">
|
|
<div className="billing-toggle" style={{ display: 'none' }}>
|
|
<div>
|
|
<button className="billing-btn active">💳 Помесячно</button>
|
|
<button className="billing-btn">
|
|
🔥 Годовая
|
|
<span>ВЫГОДНО</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="subscription-grid">
|
|
|
|
{userData.tariffs?.map(((item: {
|
|
id: number,
|
|
name: string,
|
|
price: number,
|
|
tokens: number,
|
|
maxFilesCount: number,
|
|
diskSize: number
|
|
}) => {
|
|
return (
|
|
<div
|
|
className="plan-card animate-card"
|
|
key={item.id}
|
|
>
|
|
<div className="plan-header">
|
|
<div className="plan-icon">🚀</div>
|
|
<h3 className="plan-name">
|
|
{item.name}
|
|
</h3>
|
|
<div className="plan-price">
|
|
{item.price}
|
|
</div>
|
|
<div className="plan-period">в месяц</div>
|
|
<div className="plan-tokens">
|
|
{item.tokens} токенов включено</div>
|
|
</div>
|
|
<ul className="plan-features">
|
|
<li className="plan-feature">
|
|
<span className="feature-icon">✓</span>
|
|
{item.maxFilesCount} файлов в месяц
|
|
</li>
|
|
<li className="plan-feature">
|
|
<span className="feature-icon">✓</span>
|
|
{item.diskSize ? convertBytes(item.diskSize) : 0} хранилища
|
|
</li>
|
|
<li className="plan-feature">
|
|
<span className="feature-icon">✓</span>
|
|
Базовые модули защиты
|
|
</li>
|
|
<li className="plan-feature">
|
|
<span className="feature-icon">✓</span>
|
|
Поддержка 24/7
|
|
</li>
|
|
<li className="plan-feature">
|
|
<span className="feature-icon not">✗</span>
|
|
API доступ
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}))}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |