feat: initialize project with Symfony, React, and Tailwind CSS setup

- 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
2026-06-09 22:27:16 +03:30
parent de1a78a235
commit c98d7b7968
33 changed files with 10399 additions and 116 deletions
@@ -0,0 +1,55 @@
+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>
+  );
+}