52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react';
|
|
import PaymentTabTariffs from '@/app/ui/payment/payment-tab-tariffs';
|
|
import PaymentTubBuyTokens from './payment-tab-buy-tokens';
|
|
import PaymentTabTransactionHistory from './payment-tab-transaction-history';
|
|
|
|
|
|
export default function PaymentTabs() {
|
|
let [selectedTab, setSelectedTab] = useState('1');
|
|
function switchTabsHandler(tab: string) {
|
|
setSelectedTab(tab);
|
|
}
|
|
return (
|
|
<>
|
|
<div className="payment-tabs">
|
|
<button
|
|
className={`payment-tab ${selectedTab === '1' ? 'active' : ''}`}
|
|
onClick={() => {
|
|
switchTabsHandler('1')
|
|
}}>
|
|
Тарифные планы
|
|
</button>
|
|
<button
|
|
className={`payment-tab ${selectedTab === '2' ? 'active' : ''}`}
|
|
onClick={() => {
|
|
switchTabsHandler('2')
|
|
}}>
|
|
Пополнить токены
|
|
</button>
|
|
<button
|
|
className={`payment-tab ${selectedTab === '3' ? 'active' : ''}`}
|
|
onClick={() => {
|
|
switchTabsHandler('3')
|
|
}}>
|
|
История операций
|
|
</button>
|
|
</div>
|
|
<div className="tab-content">
|
|
{selectedTab === '1' && (
|
|
<PaymentTabTariffs/>
|
|
)}
|
|
{selectedTab === '2' && (
|
|
<PaymentTubBuyTokens/>
|
|
)}
|
|
{selectedTab === '3' && (
|
|
<PaymentTabTransactionHistory/>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
} |