52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { NavLink } from 'react-router-dom'
|
||
import type { Chain } from '@features/wallet'
|
||
import { COIN_ICONS } from '@shared/assets/coins'
|
||
import styles from './WalletChainTabs.module.css'
|
||
|
||
interface TabItem {
|
||
chain: Chain
|
||
label: string
|
||
icon: string
|
||
}
|
||
|
||
const TABS: TabItem[] = [
|
||
{ chain: 'BTC', label: 'BTC', icon: COIN_ICONS.BTC },
|
||
{ chain: 'ETH', label: 'ETH', icon: COIN_ICONS.ETH },
|
||
{ chain: 'SOL', label: 'SOL', icon: COIN_ICONS.SOL },
|
||
{ chain: 'TRX', label: 'TRX', icon: COIN_ICONS.TRX },
|
||
{ chain: 'BSC', label: 'BSC', icon: COIN_ICONS.BNB },
|
||
]
|
||
|
||
const allCoinsIcon = (
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<ellipse cx="12" cy="6" rx="8" ry="3" />
|
||
<path d="M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6" />
|
||
<path d="M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6" />
|
||
</svg>
|
||
)
|
||
|
||
export function WalletChainTabs() {
|
||
return (
|
||
<div className={styles.tabs}>
|
||
<NavLink
|
||
to="/wallet"
|
||
end
|
||
className={({ isActive }) => `${styles.tab} ${isActive ? styles.active : ''}`}
|
||
>
|
||
<span className={styles.icon}>{allCoinsIcon}</span>
|
||
<span>Все монеты</span>
|
||
</NavLink>
|
||
{TABS.map((t) => (
|
||
<NavLink
|
||
key={t.chain}
|
||
to={`/wallet/${t.chain.toLowerCase()}`}
|
||
className={({ isActive }) => `${styles.tab} ${isActive ? styles.active : ''}`}
|
||
>
|
||
<img src={t.icon} alt={t.label} className={styles.icon} />
|
||
<span>{t.label}</span>
|
||
</NavLink>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|