hamed
c98d7b7968
- Add package.json with development and production dependencies - Create postcss.config.js for Tailwind CSS integration - Implement AdminController for handling admin routes - Add admin index template with React root element - Create base template for consistent layout - Configure TypeScript with tsconfig.json - Set up Webpack configuration for asset management
56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Bars3Icon, BellIcon } from '@heroicons/react/24/outline';
|
|
import { useUiStore } from '../../stores/uiStore';
|
|
|
|
interface TopbarProps {
|
|
pageTitle?: string;
|
|
breadcrumbs?: { label: string; to?: string }[];
|
|
}
|
|
|
|
export default function Topbar({ pageTitle, breadcrumbs }: TopbarProps) {
|
|
const toggle = useUiStore((s) => s.toggleSidebar);
|
|
|
|
return (
|
|
<header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={toggle}
|
|
className="text-gray-500 hover:text-gray-700 p-1 rounded-md hover:bg-gray-100 transition-colors md:hidden"
|
|
>
|
|
<Bars3Icon className="w-5 h-5" />
|
|
</button>
|
|
|
|
<div>
|
|
{pageTitle && <h2 className="text-base font-semibold text-gray-800">{pageTitle}</h2>}
|
|
{breadcrumbs && breadcrumbs.length > 0 && (
|
|
<nav className="flex items-center gap-1 text-xs text-gray-500">
|
|
{breadcrumbs.map((crumb, i) => (
|
|
<React.Fragment key={i}>
|
|
{i > 0 && <span>/</span>}
|
|
<span className={i === breadcrumbs.length - 1 ? 'text-gray-700 font-medium' : ''}>
|
|
{crumb.label}
|
|
</span>
|
|
</React.Fragment>
|
|
))}
|
|
</nav>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<button className="relative text-gray-500 hover:text-gray-700 p-2 rounded-lg hover:bg-gray-100 transition-colors">
|
|
<BellIcon className="w-5 h-5" />
|
|
<span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
|
|
</button>
|
|
|
|
<div className="flex items-center gap-2 cursor-pointer">
|
|
<div className="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-bold">
|
|
A
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-700 hidden sm:block">Admin</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|