add payments page layouts

src/app/ui/payment/payment-tabs.tsx

@@ -0,0 +1,53 @@
+'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) {
+		console.log('click');
+		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>
+		</>
+	)
+}