Approve Lovable Tool Use

src/components/layout/Header.tsx

@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { Search, Menu, Zap, MapPin, Star } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Badge } from '@/components/ui/badge';
+
+export function Header() {
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-16 items-center justify-between px-4">
+        {/* Logo and Brand */}
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <div className="relative">
+              <Zap className="h-8 w-8 text-primary" />
+              <div className="absolute inset-0 blur-sm bg-primary/20 rounded-full"></div>
+            </div>
+            <div className="flex flex-col">
+              <h1 className="text-xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+                ThrillWiki
+              </h1>
+              <span className="text-xs text-muted-foreground -mt-1">Theme Park Database</span>
+            </div>
+          </div>
+          
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-6 ml-8">
+            <Button variant="ghost" className="text-sm font-medium hover:text-primary">
+              <MapPin className="w-4 h-4 mr-2" />
+              Parks
+            </Button>
+            <Button variant="ghost" className="text-sm font-medium hover:text-primary">
+              🎢 Rides
+            </Button>
+            <Button variant="ghost" className="text-sm font-medium hover:text-primary">
+              <Star className="w-4 h-4 mr-2" />
+              Reviews
+            </Button>
+            <Button variant="ghost" className="text-sm font-medium hover:text-primary">
+              🏭 Manufacturers
+            </Button>
+          </nav>
+        </div>
+
+        {/* Search Bar */}
+        <div className="flex-1 max-w-xl mx-4">
+          <div className={`relative transition-all duration-300 ${isSearchFocused ? 'scale-105' : ''}`}>
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+            <Input
+              placeholder="Search parks, rides, or locations..."
+              className={`pl-10 pr-4 bg-muted/50 border-border/50 focus:border-primary/50 transition-all duration-300 ${
+                isSearchFocused ? 'shadow-lg shadow-primary/10' : ''
+              }`}
+              onFocus={() => setIsSearchFocused(true)}
+              onBlur={() => setIsSearchFocused(false)}
+            />
+            {isSearchFocused && (
+              <div className="absolute top-full mt-1 left-0 right-0 bg-card border border-border rounded-lg shadow-xl z-50 p-3">
+                <div className="text-sm text-muted-foreground mb-2">Popular searches</div>
+                <div className="flex flex-wrap gap-2">
+                  <Badge variant="secondary" className="cursor-pointer hover:bg-primary/20">
+                    Roller Coasters
+                  </Badge>
+                  <Badge variant="secondary" className="cursor-pointer hover:bg-primary/20">
+                    Disney World
+                  </Badge>
+                  <Badge variant="secondary" className="cursor-pointer hover:bg-primary/20">
+                    Cedar Point
+                  </Badge>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* User Actions */}
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="sm" className="hidden sm:flex">
+            Sign In
+          </Button>
+          <Button size="sm" className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+            Join ThrillWiki
+          </Button>
+          
+          {/* Mobile Menu */}
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="sm" className="md:hidden">
+                <Menu className="h-4 w-4" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-[300px] sm:w-[400px]">
+              <div className="flex flex-col gap-4 mt-8">
+                <Button variant="ghost" className="justify-start">
+                  <MapPin className="w-4 h-4 mr-2" />
+                  Parks
+                </Button>
+                <Button variant="ghost" className="justify-start">
+                  🎢 Rides
+                </Button>
+                <Button variant="ghost" className="justify-start">
+                  <Star className="w-4 h-4 mr-2" />
+                  Reviews
+                </Button>
+                <Button variant="ghost" className="justify-start">
+                  🏭 Manufacturers
+                </Button>
+                <div className="border-t pt-4 mt-4">
+                  <Button variant="outline" className="w-full mb-2">
+                    Sign In
+                  </Button>
+                  <Button className="w-full bg-gradient-to-r from-primary to-accent">
+                    Join ThrillWiki
+                  </Button>
+                </div>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+    </header>
+  );
+}