first commit

2026-04-09 10:29:11 +02:00
commit dda118a2f7
36 changed files with 14470 additions and 0 deletions
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -0,0 +1,119 @@
+import { Search, User, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import React, { useState } from 'react';
+import { MediaCategory } from '@/types';
+import LibrarySettings from './LibrarySettings';
+
+interface HeaderProps {
+  onBrowse: () => void;
+  onCast: () => void;
+  onSearch: (query: string) => void;
+  activeCategory: MediaCategory;
+  onCategoryChange: (category: MediaCategory) => void;
+  enabledCategories: MediaCategory[];
+  onToggleCategory: (category: MediaCategory) => void;
+  transparent?: boolean;
+}
+
+export default function Header({ 
+  onBrowse, 
+  onCast, 
+  onSearch, 
+  activeCategory,
+  onCategoryChange,
+  enabledCategories,
+  onToggleCategory,
+  transparent 
+}: HeaderProps) {
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    onSearch(query);
+  };
+
+  const toggleSearch = () => {
+    setIsSearchOpen(!isSearchOpen);
+    if (isSearchOpen) {
+      setSearchQuery('');
+      onSearch('');
+    }
+  };
+
+  return (
+    <header 
+      className={cn(
+        "fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-6 py-4 transition-all duration-300",
+        transparent ? "bg-transparent" : "bg-[#6d28d9]"
+      )}
+    >
+      <div className="flex items-center gap-8">
+        <div 
+          className="text-2xl font-black text-white cursor-pointer flex items-center gap-1"
+          onClick={onBrowse}
+        >
+          <div className="w-6 h-6 bg-white rounded-full flex items-center justify-center">
+            <div className="w-3 h-3 bg-[#6d28d9] rounded-full" />
+          </div>
+          kyoo
+        </div>
+        <nav className="hidden md:flex items-center gap-6">
+          {enabledCategories.map(cat => (
+            <button 
+              key={cat}
+              onClick={() => onCategoryChange(cat)}
+              className={cn(
+                "text-sm font-bold transition-colors uppercase tracking-wider",
+                activeCategory === cat ? "text-white" : "text-white/60 hover:text-white"
+              )}
+            >
+              {cat}
+            </button>
+          ))}
+          <div className="w-px h-4 bg-white/20 mx-2" />
+          <button 
+            onClick={onCast}
+            className="text-sm font-bold text-white/60 hover:text-white transition-colors uppercase tracking-wider"
+          >
+            CAST
+          </button>
+        </nav>
+      </div>
+      <div className="flex items-center gap-4">
+        <div className={cn(
+          "flex items-center transition-all duration-300 overflow-hidden",
+          isSearchOpen ? "w-48 md:w-64 bg-white/10 rounded-full px-3 py-1" : "w-0"
+        )}>
+          <input 
+            type="text"
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={handleSearchChange}
+            className="bg-transparent border-none outline-none text-white text-sm w-full placeholder:text-white/50"
+            autoFocus={isSearchOpen}
+          />
+        </div>
+        <button 
+          onClick={toggleSearch}
+          className="p-2 text-white/90 hover:text-white transition-colors"
+        >
+          {isSearchOpen ? <X size={20} /> : <Search size={20} />}
+        </button>
+        <LibrarySettings 
+          enabledCategories={enabledCategories} 
+          onToggleCategory={onToggleCategory} 
+        />
+        <button className="w-8 h-8 rounded-full overflow-hidden border-2 border-white/20">
+          <img 
+            src="https://picsum.photos/seed/user/100/100" 
+            alt="User" 
+            className="w-full h-full object-cover"
+            referrerPolicy="no-referrer"
+          />
+        </button>
+      </div>
+    </header>
+  );
+}