Changes
This commit is contained in:
gpt-engineer-app[bot]
23
src/components/layout/AppLayout.tsx
Normal file
23
src/components/layout/AppLayout.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { Sidebar } from './Sidebar';
|
||||
import { TopBar } from './TopBar';
|
||||
|
||||
interface AppLayoutProps {
|
||||
children: ReactNode;
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export function AppLayout({ children, title, description }: AppLayoutProps) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Sidebar />
|
||||
<div className="pl-[264px]">
|
||||
<TopBar title={title} description={description} />
|
||||
<main className="p-8">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
82
src/components/layout/Sidebar.tsx
Normal file
82
src/components/layout/Sidebar.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import { NavLink, useLocation } from 'react-router-dom';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Calendar,
|
||||
User,
|
||||
DollarSign,
|
||||
Settings,
|
||||
Ticket
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const navItems = [
|
||||
{ title: 'Dashboard', href: '/', icon: LayoutDashboard },
|
||||
{ title: 'Partner Management', href: '/partners', icon: Users },
|
||||
{ title: 'Events', href: '/events', icon: Calendar },
|
||||
{ title: 'Users', href: '/users', icon: User },
|
||||
{ title: 'Financials', href: '/financials', icon: DollarSign },
|
||||
{ title: 'Settings', href: '/settings', icon: Settings },
|
||||
];
|
||||
|
||||
export function Sidebar() {
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<aside className="fixed left-0 top-0 z-40 h-screen w-[264px] bg-card shadow-neu">
|
||||
{/* Logo Section */}
|
||||
<div className="flex h-20 items-center gap-3 px-6 border-b border-border/50">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary shadow-neu-inset-sm">
|
||||
<Ticket className="h-5 w-5 text-primary-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-lg font-bold text-foreground">Eventify</h1>
|
||||
<span className="text-xs font-medium tracking-widest text-muted-foreground">BACKOFFICE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex flex-col gap-2 p-4">
|
||||
{navItems.map((item) => {
|
||||
const isActive = location.pathname === item.href ||
|
||||
(item.href !== '/' && location.pathname.startsWith(item.href));
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
key={item.href}
|
||||
to={item.href}
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200",
|
||||
isActive
|
||||
? "neu-button-active"
|
||||
: "neu-button hover:shadow-neu-lg"
|
||||
)}
|
||||
>
|
||||
<item.icon className={cn(
|
||||
"h-5 w-5 transition-colors",
|
||||
isActive ? "text-primary-foreground" : "text-muted-foreground"
|
||||
)} />
|
||||
<span className={cn(
|
||||
"font-medium transition-colors",
|
||||
isActive ? "text-primary-foreground" : "text-foreground"
|
||||
)}>
|
||||
{item.title}
|
||||
</span>
|
||||
</NavLink>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Bottom Section */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 border-t border-border/50">
|
||||
<div className="neu-card p-4">
|
||||
<p className="text-xs text-muted-foreground mb-2">Platform Status</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-2 w-2 rounded-full bg-success animate-pulse-soft" />
|
||||
<span className="text-sm font-medium text-foreground">All Systems Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
64
src/components/layout/TopBar.tsx
Normal file
64
src/components/layout/TopBar.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { Search, Bell, ChevronDown } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface TopBarProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export function TopBar({ title, description }: TopBarProps) {
|
||||
return (
|
||||
<header className="sticky top-0 z-30 flex h-20 items-center justify-between bg-background/80 backdrop-blur-sm px-8 border-b border-border/30">
|
||||
{/* Page Title */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">{title}</h1>
|
||||
{description && (
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Section */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search partners, events..."
|
||||
className={cn(
|
||||
"h-10 w-64 pl-11 pr-4 rounded-xl text-sm",
|
||||
"bg-secondary text-foreground placeholder:text-muted-foreground",
|
||||
"shadow-neu-inset focus:outline-none focus:ring-2 focus:ring-accent/50",
|
||||
"transition-all duration-200"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Notifications */}
|
||||
<button
|
||||
className={cn(
|
||||
"relative h-10 w-10 flex items-center justify-center rounded-xl",
|
||||
"neu-button"
|
||||
)}
|
||||
>
|
||||
<Bell className="h-5 w-5 text-muted-foreground" />
|
||||
<span className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center rounded-full bg-error text-[10px] font-bold text-error-foreground">
|
||||
3
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Profile */}
|
||||
<button className="flex items-center gap-3 pl-4 pr-3 py-2 rounded-xl neu-button">
|
||||
<div className="h-8 w-8 rounded-lg bg-primary shadow-neu-inset-sm flex items-center justify-center">
|
||||
<span className="text-sm font-bold text-primary-foreground">AS</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-sm font-medium text-foreground">Admin User</p>
|
||||
<p className="text-xs text-muted-foreground">Super Admin</p>
|
||||
</div>
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user