232 lines
10 KiB
TypeScript
232 lines
10 KiB
TypeScript
import { useState } from 'react';
|
|
import { Dialog } from '@headlessui/react';
|
|
import {
|
|
Bars3Icon,
|
|
XMarkIcon,
|
|
HomeIcon,
|
|
ChartBarIcon,
|
|
CogIcon,
|
|
DocumentTextIcon,
|
|
CurrencyDollarIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
const navigation = [
|
|
{ name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
|
|
{ name: 'Portfolio', href: '#', icon: CurrencyDollarIcon, current: false },
|
|
{ name: 'Analytics', href: '#', icon: ChartBarIcon, current: false },
|
|
{ name: 'Reports', href: '#', icon: DocumentTextIcon, current: false },
|
|
{ name: 'Settings', href: '#', icon: CogIcon, current: false },
|
|
];
|
|
|
|
function classNames(...classes: string[]) {
|
|
return classes.filter(Boolean).join(' ');
|
|
}
|
|
|
|
export default function App() {
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<div>
|
|
<Dialog
|
|
as="div"
|
|
className="relative z-50 lg:hidden"
|
|
open={sidebarOpen}
|
|
onClose={setSidebarOpen}
|
|
>
|
|
<div className="fixed inset-0 bg-black/80" />
|
|
|
|
<div className="fixed inset-0 flex">
|
|
<Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
|
|
<div className="absolute left-full top-0 flex w-16 justify-center pt-5">
|
|
<button
|
|
type="button"
|
|
className="-m-2.5 p-2.5"
|
|
onClick={() => setSidebarOpen(false)}
|
|
>
|
|
<span className="sr-only">Close sidebar</span>
|
|
<XMarkIcon className="h-6 w-6 text-text-primary" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex grow flex-col gap-y-3 overflow-y-auto bg-background px-3 pb-2 scrollbar-thin">
|
|
<div className="flex h-12 shrink-0 items-center border-b border-border">
|
|
<h1 className="text-lg font-bold text-text-primary">Stock Bot</h1>
|
|
</div>
|
|
<nav className="flex flex-1 flex-col">
|
|
<ul role="list" className="flex flex-1 flex-col gap-y-4">
|
|
<li>
|
|
<ul role="list" className="-mx-1 space-y-0.5">
|
|
{navigation.map(item => (
|
|
<li key={item.name}>
|
|
<a
|
|
href={item.href}
|
|
className={classNames(
|
|
item.current
|
|
? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
|
|
: 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
|
|
'group flex gap-x-2 rounded-r-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors'
|
|
)}
|
|
>
|
|
<item.icon
|
|
className={classNames(
|
|
item.current
|
|
? 'text-primary-400'
|
|
: 'text-text-muted group-hover:text-primary-400',
|
|
'h-4 w-4 shrink-0 transition-colors'
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
{item.name}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</div>
|
|
</Dialog>
|
|
|
|
{/* Static sidebar for desktop */}
|
|
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-60 lg:flex-col">
|
|
<div className="flex grow flex-col gap-y-3 overflow-y-auto border-r border-border bg-background px-3 scrollbar-thin">
|
|
<div className="flex h-12 shrink-0 items-center border-b border-border">
|
|
<h1 className="text-lg font-bold text-text-primary">Stock Bot</h1>
|
|
</div>
|
|
<nav className="flex flex-1 flex-col">
|
|
<ul role="list" className="flex flex-1 flex-col gap-y-4">
|
|
<li>
|
|
<ul role="list" className="-mx-1 space-y-0.5">
|
|
{navigation.map(item => (
|
|
<li key={item.name}>
|
|
<a
|
|
href={item.href}
|
|
className={classNames(
|
|
item.current
|
|
? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
|
|
: 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
|
|
'group flex gap-x-2 rounded-r-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors'
|
|
)}
|
|
>
|
|
<item.icon
|
|
className={classNames(
|
|
item.current
|
|
? 'text-primary-400'
|
|
: 'text-text-muted group-hover:text-primary-400',
|
|
'h-4 w-4 shrink-0 transition-colors'
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
{item.name}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="sticky top-0 z-40 flex items-center gap-x-4 bg-background px-3 py-2 shadow-sm sm:px-4 lg:hidden border-b border-border">
|
|
<button
|
|
type="button"
|
|
className="-m-1.5 p-1.5 text-text-secondary lg:hidden hover:text-text-primary transition-colors"
|
|
onClick={() => setSidebarOpen(true)}
|
|
>
|
|
<span className="sr-only">Open sidebar</span>
|
|
<Bars3Icon className="h-5 w-5" aria-hidden="true" />
|
|
</button>
|
|
<div className="flex-1 text-sm font-medium leading-tight text-text-primary">
|
|
Dashboard
|
|
</div>
|
|
</div>
|
|
|
|
<main className="py-4 lg:pl-60 w-full">
|
|
<div className="px-4">
|
|
<h1 className="text-lg font-bold text-text-primary mb-2">
|
|
Welcome to Stock Bot Dashboard
|
|
</h1>
|
|
<p className="text-text-secondary mb-6 text-sm">
|
|
Monitor your trading performance, manage portfolios, and analyze market data.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mb-6">
|
|
<div className="bg-surface-secondary p-4 rounded-lg border border-border hover:border-primary-500/50 transition-colors">
|
|
<div className="flex items-center">
|
|
<div className="p-1.5 bg-primary-500/10 rounded">
|
|
<CurrencyDollarIcon className="h-5 w-5 text-primary-400" />
|
|
</div>
|
|
<div className="ml-3">
|
|
<h3 className="text-sm font-medium text-text-primary">Portfolio Value</h3>
|
|
<p className="text-lg font-bold text-primary-400">$0.00</p>
|
|
<p className="text-xs text-text-muted">Total assets</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-surface-secondary p-4 rounded-lg border border-border hover:border-success/50 transition-colors">
|
|
<div className="flex items-center">
|
|
<div className="p-1.5 bg-success/10 rounded">
|
|
<ChartBarIcon className="h-5 w-5 text-success" />
|
|
</div>
|
|
<div className="ml-3">
|
|
<h3 className="text-sm font-medium text-text-primary">Total Return</h3>
|
|
<p className="text-lg font-bold text-success">+0.00%</p>
|
|
<p className="text-xs text-text-muted">Since inception</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-surface-secondary p-4 rounded-lg border border-border hover:border-warning/50 transition-colors">
|
|
<div className="flex items-center">
|
|
<div className="p-1.5 bg-warning/10 rounded">
|
|
<DocumentTextIcon className="h-5 w-5 text-warning" />
|
|
</div>
|
|
<div className="ml-3">
|
|
<h3 className="text-sm font-medium text-text-primary">
|
|
Active Strategies
|
|
</h3>
|
|
<p className="text-lg font-bold text-warning">0</p>
|
|
<p className="text-xs text-text-muted">Running algorithms</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<div className="bg-surface-secondary p-4 rounded-lg border border-border">
|
|
<h3 className="text-base font-medium text-text-primary mb-3">
|
|
Recent Activity
|
|
</h3>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between p-2 bg-surface-tertiary rounded border border-border">
|
|
<span className="text-text-secondary text-sm">No recent activity</span>
|
|
<span className="text-text-muted text-xs">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-surface-secondary p-4 rounded-lg border border-border">
|
|
<h3 className="text-base font-medium text-text-primary mb-3">
|
|
Market Overview
|
|
</h3>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between p-2 bg-surface-tertiary rounded border border-border">
|
|
<span className="text-text-secondary text-sm">
|
|
Market data loading...
|
|
</span>
|
|
<span className="text-text-muted text-xs">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|