87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useState } from "react";
|
|
|
|
export default function TopBar() {
|
|
const [ticker, setTicker] = useState("NVDA");
|
|
const [running, setRunning] = useState(false);
|
|
|
|
const handleRun = () => {
|
|
setRunning(true);
|
|
setTimeout(() => setRunning(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<motion.header
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
|
|
className="flex items-center justify-between py-4 border-b border-border-subtle"
|
|
>
|
|
<div className="flex items-center gap-3.5">
|
|
<div
|
|
className="w-9 h-9 rounded-md grid place-items-center font-display font-extrabold text-base
|
|
text-bg-void tracking-tighter"
|
|
style={{
|
|
background: "linear-gradient(135deg, #d4af37, #b8941f)",
|
|
boxShadow: "0 0 20px rgba(212, 175, 55, 0.15)",
|
|
}}
|
|
>
|
|
TA
|
|
</div>
|
|
<div>
|
|
<div className="font-display font-bold text-lg tracking-tight text-text-primary">
|
|
TradingAgents
|
|
</div>
|
|
<div className="text-[11px] text-text-tertiary tracking-[2px] uppercase">
|
|
Multi-Agent Intelligence
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<div className="flex items-center gap-2 text-[11px] text-text-secondary">
|
|
<div
|
|
className="w-1.5 h-1.5 rounded-full bg-green"
|
|
style={{ animation: "pulse-dot 2s ease-in-out infinite" }}
|
|
/>
|
|
<span>System Online</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 bg-bg-elevated border border-border-medium rounded-lg px-3 py-1.5">
|
|
<label className="text-[10px] text-text-tertiary uppercase tracking-[1px]">
|
|
Ticker
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={ticker}
|
|
onChange={(e) => setTicker(e.target.value.toUpperCase())}
|
|
onKeyDown={(e) => e.key === "Enter" && handleRun()}
|
|
maxLength={5}
|
|
spellCheck={false}
|
|
className="bg-transparent border-none outline-none text-amber font-display font-bold text-base w-20 tracking-wide"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleRun}
|
|
className="border-none px-5 py-2 rounded-lg font-display font-bold text-xs tracking-[1px]
|
|
uppercase cursor-pointer transition-all duration-300 text-bg-void
|
|
hover:-translate-y-0.5"
|
|
style={{
|
|
background: running
|
|
? "linear-gradient(135deg, #4ecdc4, #3ab5ad)"
|
|
: "linear-gradient(135deg, #d4af37, #c9a020)",
|
|
boxShadow: running
|
|
? "0 0 20px rgba(78, 205, 196, 0.15)"
|
|
: "0 0 20px rgba(212, 175, 55, 0.15)",
|
|
}}
|
|
>
|
|
{running ? "Analyzing..." : "Run Analysis"}
|
|
</button>
|
|
</div>
|
|
</motion.header>
|
|
);
|
|
}
|