File size: 2,334 Bytes
383d246 5f5514e 945e815 5f5514e 945e815 383d246 5f5514e 383d246 945e815 5f5514e 383d246 5f5514e 945e815 5f5514e 945e815 5f5514e 945e815 5f5514e 945e815 5f5514e 945e815 5f5514e 945e815 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import React, { useState } from 'react';
import { Num } from './ui/index';
interface TopBarProps { publicKey: string | null; balance: { sol: number; usdt: number }; aiStatus: any; onLock: () => void; }
export default function TopBar({ publicKey, balance, aiStatus, onLock }: TopBarProps) {
const [copied, setCopied] = useState(false);
const short = publicKey ? `${publicKey.slice(0, 4)}…${publicKey.slice(-4)}` : '—';
const copy = () => { if (publicKey) { navigator.clipboard.writeText(publicKey); setCopied(true); setTimeout(() => setCopied(false), 1500); } };
const mods = aiStatus ? [aiStatus.llm, aiStatus.transcription, aiStatus.tts, aiStatus.embed, aiStatus.translation, aiStatus.ocr].filter(Boolean).length : 0;
return (
<header className="h-[56px] border-b border-hairline flex items-center justify-between px-5 bg-canvas">
{/* Left */}
<div className="flex items-center gap-3">
<button onClick={copy} className="flex items-center gap-2 px-3 py-1.5 rounded-pill bg-surface-strong text-body-sm text-muted hover:text-ink transition-colors">
<span className="w-1.5 h-1.5 rounded-full bg-semantic-up" />
<span className="font-mono text-caption">{short}</span>
<span className="text-caption text-muted-soft">{copied ? '✓' : '⊕'}</span>
</button>
<span className="badge-pill text-[10px]">DEVNET</span>
</div>
{/* Center — Balances */}
<div className="flex items-center gap-6">
<div className="text-center">
<div className="text-caption text-muted">SOL</div>
<div className="text-title-sm text-ink"><Num value={balance.sol} decimals={4} /></div>
</div>
<div className="w-px h-6 bg-hairline" />
<div className="text-center">
<div className="text-caption text-muted">USDT</div>
<div className="text-title-sm text-ink"><Num value={balance.usdt} decimals={2} /></div>
</div>
</div>
{/* Right */}
<div className="flex items-center gap-3">
<span className={`badge-pill text-[10px] ${mods > 0 ? 'badge-pill-blue' : ''}`}>
{mods > 0 ? `${mods}/6 AI` : 'Loading…'}
</span>
<button onClick={onLock} className="btn-secondary text-body-sm py-2 px-3">Lock</button>
</div>
</header>
);
}
|