first commit

src/pages/swap/index.ts

@@ -0,0 +1 @@
+export { SwapPage } from './ui/SwapPage'

src/pages/swap/ui/SwapPage.module.css

@@ -0,0 +1,52 @@
+.page {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background: var(--bg-deep);
+}
+
+.tabs {
+    display: flex;
+    gap: 8px;
+    padding: 24px 28px 0;
+}
+
+.tab {
+    padding: 10px 24px;
+    border-radius: 10px;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    border: none;
+    font-family: var(--font-sans);
+    letter-spacing: 0.5px;
+    transition: all 0.2s;
+}
+
+.active {
+    background: linear-gradient(135deg, var(--grad-edge), var(--grad-center));
+    color: var(--text-primary);
+}
+
+.inactive {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text-secondary);
+}
+
+.inactive:hover {
+    color: var(--text-primary);
+}
+
+.main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 32px 20px 48px;
+}
+
+@media (max-width: 650px) {
+    .main {
+        padding: 32px 20px;
+    }
+}

src/pages/swap/ui/SwapPage.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { Footer } from '@widgets/footer'
+import { SwapForm } from '@widgets/swap-form'
+import { WalletHeader } from '@widgets/wallet-header'
+import styles from './SwapPage.module.css'
+
+type Tab = 'swap' | 'bridge'
+
+export function SwapPage() {
+  const [tab, setTab] = useState<Tab>('swap')
+
+  return (
+    <div className={styles.page}>
+      <WalletHeader />
+
+      <div className={styles.tabs}>
+        <button
+          className={`${styles.tab} ${tab === 'swap' ? styles.active : styles.inactive}`}
+          onClick={() => setTab('swap')}
+        >
+          СВОП
+        </button>
+        <button
+          className={`${styles.tab} ${tab === 'bridge' ? styles.active : styles.inactive}`}
+          onClick={() => setTab('bridge')}
+        >
+          БРИДЖ
+        </button>
+      </div>
+
+      <main className={styles.main}>
+        <SwapForm />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}