frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tarrifs

Browse Source
This commit is contained in:
smanylov
2026-02-03 17:31:27 +07:00
parent 1e199de7b2
commit e0606c5486
10 changed files with 161 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/payment/payment-tab-tariffs.tsx
+57 -111
View File
@@ -1,8 +1,10 @@
<<<<<<< HEAD
'use client'
import { useEffect } from 'react';
import { getUserData } from '@/app/actions/action';
import { useQuery } from '@tanstack/react-query';
import { convertBytes } from '@/app/lib/convertBytes';
export default function PaymentTabTariffs() {
const {
@@ -17,14 +19,12 @@ export default function PaymentTabTariffs() {
}
});
useEffect(() => {
console.log('show => userData');
console.log(userData);
}, [])
=======
export default function PaymentTabTariffs() {
>>>>>>> parent of 1e199de (edit registration)
return (
<div className="tab-content">
<div className="billing-toggle">
<div className="billing-toggle" style={{ display: 'none' }}>
<div>
<button className="billing-btn active">💳 Помесячно</button>
<button className="billing-btn">
@@ -34,111 +34,57 @@ export default function PaymentTabTariffs() {
</div>
</div>
<div className="subscription-grid">
<div className="plan-card animate-card">
<div className="plan-header">
<div className="plan-icon">🚀</div>
<h3 className="plan-name">СТАРТ</h3>
<div className="plan-price">900₽</div>
<div className="plan-period">в месяц</div>
<div className="plan-tokens">100 токенов включено</div>
</div>
<ul className="plan-features">
<li className="plan-feature">
<span className="feature-icon">✓</span>
100 файлов в месяц
</li>
<li className="plan-feature">
<span className="feature-icon">✓</span>
1 ГБ хранилища
</li>
<li className="plan-feature">
<span className="feature-icon">✓</span>
До 10 МБ на файл
</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 className="plan-card animate-card">
<div className="plan-header">
<div className="plan-icon">🚀</div>
<h3 className="plan-name">ПРЕМИУМ</h3>
<div className="plan-price">3500₽</div>
<div className="plan-period">в месяц</div>
<div className="plan-tokens">100 токенов включено</div>
</div>
<ul className="plan-features">
<li className="plan-feature">
<span className="feature-icon">✓</span>
100 файлов в месяц
</li>
<li className="plan-feature">
<span className="feature-icon">✓</span>
1 ГБ хранилища
</li>
<li className="plan-feature">
<span className="feature-icon">✓</span>
До 10 МБ на файл
</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 className="plan-card animate-card">
<div className="plan-header">
<div className="plan-icon">🚀</div>
<h3 className="plan-name">ПРОФИ</h3>
<div className="plan-price">9500₽</div>
<div className="plan-period">в месяц</div>
<div className="plan-tokens">100 токенов включено</div>
</div>
<ul className="plan-features">
<li className="plan-feature">
<span className="feature-icon">✓</span>
100 файлов в месяц
</li>
<li className="plan-feature">
<span className="feature-icon">✓</span>
1 ГБ хранилища
</li>
<li className="plan-feature">
<span className="feature-icon">✓</span>
До 10 МБ на файл
</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>
{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>
{convertBytes(item.diskSize)} хранилища
</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>
)