react/components/HeaderComp.tsx - gemini-react - ivaninvv/dashboard

react/components/HeaderComp.tsx
59 строк2 KB
VladimirIvanin
react
30 ноя 2025, 03:42
30 ноя 2025, 03:4245b555a
import React from 'react';
import { Icons } from './icons';
import { Button } from './ui/button';

interface HeaderProps {
  onMenuClick: () => void;
}

const Header = ({ onMenuClick }: HeaderProps) => {
  return (
    <header className="sticky top-0 z-30 flex items-center justify-between h-[70px] px-6 bg-white/80 backdrop-blur-md shadow-sm lg:shadow-none border-b border-transparent lg:border-none">
      <div className="flex items-center gap-4">
        <button 
          onClick={onMenuClick}
          className="p-2 -ml-2 text-dark rounded-lg lg:hidden hover:bg-gray-100"
          aria-label="Toggle menu"
        >
          <Icons.Menu className="w-6 h-6" />
        </button>
        
        {/* Search Bar - Hidden on small screens or simplified */}
        <div className="relative hidden md:block">
          <Icons.Search className="absolute left-0 top-1/2 -translate-y-1/2 w-5 h-5 text-muted" />
        </div>
        
        <div className="hidden lg:flex gap-2">
             <Button variant="ghost" size="sm" className="text-muted hover:text-primary">Docs</Button>
             <Button variant="ghost" size="sm" className="text-muted hover:text-primary">Support</Button>
        </div>
      </div>

      <div className="flex items-center gap-2">
        <Button variant="ghost" size="icon" className="relative text-dark hover:bg-primary/10 hover:text-primary rounded-full w-10 h-10">
          <Icons.Bell className="w-5 h-5 stroke-[1.5]" />
          <span className="absolute top-2 right-2.5 w-2 h-2 bg-primary rounded-full ring-2 ring-white"></span>
        </Button>
        
        <div className="flex items-center gap-3 pl-2">
          <button className="relative w-10 h-10 overflow-hidden rounded-full border border-border hover:ring-2 hover:ring-primary/50 transition-all">
            <img 
              src="/images/profile/user-1.jpg" 
              alt="User profile" 
              className="object-cover w-full h-full"
              onError={(e) => {
                (e.target as HTMLImageElement).style.display = 'none';
                (e.target as HTMLImageElement).nextElementSibling?.classList.remove('hidden');
              }}
            />
            <div className="hidden absolute inset-0 flex items-center justify-center bg-slate-200 text-slate-500">
              <Icons.Users className="w-5 h-5" />
            </div>
          </button>
        </div>
      </div>
    </header>
  );
};

export default Header;