import React, { useState } from 'react' import { Menu, X, Play, Search } from 'lucide-react' // Responsive header component with YouTube Shorts button, logo, styled categories in Hindi // TailwindCSS classes are used for styling. export default function Header({ categories, logoSrc }) { const [open, setOpen] = useState(false) const defaultCategories = [ 'होम', 'नवीनतम', 'मनोरंजन', 'ऑटो', 'टेक', 'खेल', 'लाइफस्टाइल', ] const cats = Array.isArray(categories) && categories.length > 0 ? categories : defaultCategories return (
{/* Left: Website Logo */}
Website Logo
{/* Middle: Categories (desktop) */} {/* Right: Actions */}
{/* Search */}
{ e.preventDefault() const query = e.target.elements.searchInput.value if (query) { window.location.href = `/search?q=${encodeURIComponent(query)}` } }} className="hidden sm:flex items-center gap-2 bg-white/10 rounded-full px-2 py-1" > {/* YouTube Shorts Button */} YouTube Shorts Shorts {/* Mobile menu button */}
{/* Mobile nav drawer */} {open && (
{cats.map((cat) => ( {cat} ))}
YouTube Shorts
)}
) }