Spaces:
Running
Running
File size: 3,087 Bytes
b89a86e 1684141 b89a86e 1684141 b89a86e 1684141 b89a86e 1684141 b89a86e 1684141 b89a86e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
import { Link, useLocation } from "wouter";
import logoUrl from "@assets/assets_task_01k3qp9hccec89tp5ht8ee88x5_1756363038_img_1-removebg-preview (1)_1756364677577.png";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Search, Package } from "lucide-react";
import { useAuth } from "@/hooks/use-auth";
interface HeaderProps {
searchQuery: string;
setSearchQuery: (query: string) => void;
}
export default function Header({ searchQuery, setSearchQuery }: HeaderProps) {
const [, setLocation] = useLocation();
const { isAuthenticated, userType } = useAuth();
const handleSearch = (e: React.FormEvent) => {
e.preventDefault();
if (searchQuery.trim()) {
setLocation(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
}
};
return (
<header className="bg-gradient-to-b from-orange-50/60 to-orange-100/40 backdrop-blur-sm fixed top-0 left-0 right-0 z-[100] shadow-sm border-b border-orange-200/60" data-testid="header">
<div className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6">
<div className="flex items-center justify-between h-16">
{/* Logo */}
<div className="flex-shrink-0">
<Link href="/">
<div className="cursor-pointer" data-testid="logo">
<img
src={logoUrl}
alt="Shoposphere"
className="h-12 w-auto"
/>
</div>
</Link>
</div>
{/* Search Bar - Centered */}
<div className="flex-1 max-w-xl mx-8">
<form onSubmit={handleSearch} className="relative">
<div className="relative">
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
<Input
type="text"
placeholder="Search products..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-12 pr-4 py-3 rounded-full border border-orange-200/60 focus:ring-2 focus:ring-orange-200 focus:border-orange-500 bg-gradient-to-r from-white to-orange-50/30 shadow-sm transition-all duration-200"
data-testid="search-input"
aria-label="Search for products"
role="searchbox"
/>
</div>
</form>
</div>
{/* Orders Button (Desktop) */}
{isAuthenticated && userType === 'user' && (
<div className="hidden md:flex items-center">
<Link href="/orders">
<Button
variant="ghost"
className="text-gray-700 hover:text-orange-600 hover:bg-orange-50"
data-testid="orders-button"
>
<Package className="h-5 w-5 mr-2" />
My Orders
</Button>
</Link>
</div>
)}
</div>
</div>
</header>
);
}
|