added new exchanges system

This commit is contained in:
Boki 2025-06-17 23:19:12 -04:00
parent 95eda4a842
commit 263e9513b7
98 changed files with 4643 additions and 1496 deletions

View file

@ -0,0 +1,22 @@
import { Bars3Icon } from '@heroicons/react/24/outline';
interface HeaderProps {
setSidebarOpen: (open: boolean) => void;
title?: string;
}
export function Header({ setSidebarOpen, title = 'Dashboard' }: HeaderProps) {
return (
<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">{title}</div>
</div>
);
}

View file

@ -0,0 +1,29 @@
import { useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { Header } from './Header';
import { Sidebar } from './Sidebar';
export function Layout() {
const [sidebarOpen, setSidebarOpen] = useState(false);
const location = useLocation();
// Determine title from current route
const getTitle = () => {
const path = location.pathname.replace('/', '');
if (!path || path === 'dashboard') return 'Dashboard';
return path.charAt(0).toUpperCase() + path.slice(1);
};
return (
<div className="h-full">
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
<Header setSidebarOpen={setSidebarOpen} title={getTitle()} />
<main className="py-4 lg:pl-60 w-full h-full overflow-y-auto">
<div className="px-4 flex-col h-full">
<Outlet />
</div>
</main>
</div>
);
}

View file

@ -0,0 +1,124 @@
import { navigation } from '@/lib/constants';
import { cn } from '@/lib/utils';
import { Dialog, Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { Fragment } from 'react';
import { NavLink } from 'react-router-dom';
interface SidebarProps {
sidebarOpen: boolean;
setSidebarOpen: (open: boolean) => void;
}
export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
return (
<>
{/* Mobile sidebar */}
<Transition.Root show={sidebarOpen} as={Fragment}>
<Dialog as="div" className="relative z-50 lg:hidden" onClose={setSidebarOpen}>
<Transition.Child
as={Fragment}
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black/80" />
</Transition.Child>
<div className="fixed inset-0 flex">
<Transition.Child
as={Fragment}
enter="transition ease-in-out duration-300 transform"
enterFrom="-translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
>
<Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
<Transition.Child
as={Fragment}
enter="ease-in-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<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>
</Transition.Child>
<SidebarContent />
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
{/* Static sidebar for desktop */}
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-60 lg:flex-col">
<SidebarContent />
</div>
</>
);
}
function SidebarContent() {
return (
<div className="flex grow flex-col gap-y-3 overflow-y-auto border-r border-border bg-background px-3">
<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}>
<NavLink
to={item.href}
className={({ isActive }) =>
cn(
isActive
? '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'
)
}
>
{({ isActive }) => (
<>
<item.icon
className={cn(
isActive
? 'text-primary-400'
: 'text-text-muted group-hover:text-primary-400',
'h-4 w-4 shrink-0 transition-colors'
)}
aria-hidden="true"
/>
{item.name}
</>
)}
</NavLink>
</li>
))}
</ul>
</li>
</ul>
</nav>
</div>
);
}

View file

@ -0,0 +1,3 @@
export { Layout } from './Layout';
export { Sidebar } from './Sidebar';
export { Header } from './Header';