Refactor Navbar and Search components: enhance Navbar with mobile menu functionality and improved styling, update Search component to utilize new Button component for better UI consistency, and optimize search input layout for a more engaging user experience.
This commit is contained in:
Norbert Maciaszek
parent
33b8373c36
commit
65cc8d2fdf
|
|
@ -32,7 +32,9 @@ export default async function RootLayout({
|
|||
>
|
||||
<GlobalStoreProvider>
|
||||
<Navbar />
|
||||
<main className="[&>:last-child]:mb-0">{children}</main>
|
||||
<main className="pt-16 lg:pt-20 [&>:last-child]:mb-0">
|
||||
{children}
|
||||
</main>
|
||||
</GlobalStoreProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { FC } from "react";
|
|||
type Props = {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
theme?: "primary" | "glass";
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
};
|
||||
|
|
@ -13,12 +14,13 @@ export const Button: FC<Props> = ({
|
|||
className = "",
|
||||
onClick,
|
||||
href,
|
||||
theme = "primary",
|
||||
}) => {
|
||||
const Component = (href ? Link : "button") as any;
|
||||
|
||||
return (
|
||||
<Component
|
||||
className={`rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-white transition hover:bg-primary-900 ${className}`}
|
||||
className={`${styles[theme]} cursor-pointer ${className}`}
|
||||
onClick={onClick}
|
||||
{...(href && { href })}
|
||||
>
|
||||
|
|
@ -26,3 +28,10 @@ export const Button: FC<Props> = ({
|
|||
</Component>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = {
|
||||
primary:
|
||||
"block relative bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-2xl transition-all duration-300 hover:scale-105",
|
||||
glass:
|
||||
"p-3 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300 hover:bg-white/20 hover:scale-105",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -30,17 +30,17 @@ export const SearchInput: FC<Props> = ({
|
|||
}, [value]);
|
||||
|
||||
return (
|
||||
<div className={`relative text-gray-600 inline-block ${className}`}>
|
||||
<div>
|
||||
<input
|
||||
type="search"
|
||||
name="search"
|
||||
className="bg-white h-10 px-5 pr-10 rounded-full text-md md:text-sm focus:outline-none w-52 focus:w-[400px] transition-all max-w-[90vw]"
|
||||
value={value}
|
||||
placeholder={placeholder}
|
||||
className={className}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
autoFocus={autoFocus}
|
||||
/>
|
||||
<button type="submit" className="absolute right-0 top-0 mt-3 mr-4">
|
||||
<button type="submit" className="absolute right-0 top-1 mt-3 mr-4">
|
||||
<IoSearch />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,59 +42,122 @@ export const Search = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className="text-text hover:text-secondary cursor-pointer transition-colors"
|
||||
<Button
|
||||
theme="glass"
|
||||
className="group relative"
|
||||
onClick={() => setIsSearchOpen(!isSearchOpen)}
|
||||
>
|
||||
<IoSearch size={25} fill="currentColor" />
|
||||
</button>
|
||||
<IoSearch
|
||||
size={20}
|
||||
className="text-white transition-transform duration-300 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</Button>
|
||||
|
||||
{isSearchOpen && (
|
||||
<div className="fixed inset-0 bg-black/50 z-20 backdrop-blur-sm overflow-y-auto flex py-20">
|
||||
<button
|
||||
className="absolute top-4 right-4 text-white cursor-pointer"
|
||||
<div className="fixed inset-0 z-[60] overflow-y-auto">
|
||||
{/* Aurora Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/95 via-blue-900/95 to-teal-900/95 backdrop-blur-2xl"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-pink-500/20 via-transparent to-cyan-500/20 animate-pulse"></div>
|
||||
|
||||
{/* Close button */}
|
||||
<Button
|
||||
theme="glass"
|
||||
className="absolute top-6 right-6 z-10 group hover:!bg-red-500/50"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<IoClose size={25} fill="currentColor" />
|
||||
</button>
|
||||
<IoClose
|
||||
size={24}
|
||||
className="text-white transition-transform duration-300 group-hover:rotate-90"
|
||||
/>
|
||||
</Button>
|
||||
|
||||
<div className="container" ref={ref}>
|
||||
<div className="text-center">
|
||||
<SearchInput
|
||||
className="lg:scale-200"
|
||||
onChange={handleSearch}
|
||||
placeholder="Search for a movie"
|
||||
autoFocus={true}
|
||||
/>
|
||||
<div className="relative min-h-full flex flex-col py-20" ref={ref}>
|
||||
<div className="container mx-auto px-4 flex-1">
|
||||
{/* Header Section */}
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl lg:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-purple-200 to-cyan-200 mb-4">
|
||||
Znajdź Filmy
|
||||
</h2>
|
||||
<p className="text-lg text-gray-300 mb-8">
|
||||
Odkryj niesamowite filmy z całego świata
|
||||
</p>
|
||||
|
||||
{/* Enhanced Search Input */}
|
||||
<div className="relative max-w-2xl mx-auto">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-2xl blur-xl"></div>
|
||||
<div className="relative bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-2">
|
||||
<SearchInput
|
||||
className="w-full px-3 bg-transparent border-none text-lg lg:text-xl placeholder-gray-400 text-white focus:outline-none"
|
||||
onChange={handleSearch}
|
||||
placeholder="Wpisz tytuł filmu..."
|
||||
autoFocus={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoading && (
|
||||
<div className="text-center py-20">
|
||||
<div className="relative inline-block">
|
||||
<Spinner />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-30 blur-lg animate-pulse"></div>
|
||||
</div>
|
||||
<p className="text-gray-300 mt-4 text-lg">Szukam filmów...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results Header */}
|
||||
{results && (
|
||||
<div className="mb-8">
|
||||
<p className="text-white font-semibold flex items-center justify-center">
|
||||
<span className="mr-2 w-2 h-2 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full animate-pulse"></span>
|
||||
Znaleziono {total_results} filmów
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
{results && (
|
||||
<div className="mb-12">
|
||||
<MovieList
|
||||
overrideMovies={results.slice(0, 5).map((m) => ({
|
||||
...m,
|
||||
favorite: false,
|
||||
seen: false,
|
||||
genre_ids: JSON.stringify(m.genre_ids),
|
||||
}))}
|
||||
fluid
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show More Button */}
|
||||
{total_results > 5 && (
|
||||
<div className="text-center">
|
||||
<div className="relative inline-block">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-cyan-500 rounded-xl blur-lg opacity-50"></div>
|
||||
<Button href={`/search?s=${query}`} onClick={handleClose}>
|
||||
<span className="flex items-center gap-2">
|
||||
Zobacz wszystkie ({total_results})
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No Results */}
|
||||
{query.length >= 3 && results && results.length === 0 && (
|
||||
<div className="text-center py-20">
|
||||
<div className="text-6xl mb-4">🎬</div>
|
||||
<h3 className="text-2xl font-bold text-white mb-2">
|
||||
Brak wyników
|
||||
</h3>
|
||||
<p className="text-gray-400">Spróbuj wyszukać inny tytuł</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isLoading && (
|
||||
<div className="col-span-full mt-2 lg:mt-30 text-center ">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
{results && (
|
||||
<div className="col-span-full mt-2 lg:mt-10 text-center ">
|
||||
<p className="text-white">{total_results} movies found</p>
|
||||
</div>
|
||||
)}
|
||||
{results && (
|
||||
<MovieList
|
||||
overrideMovies={results.slice(0, 5).map((m) => ({
|
||||
...m,
|
||||
favorite: false,
|
||||
seen: false,
|
||||
genre_ids: JSON.stringify(m.genre_ids),
|
||||
}))}
|
||||
fluid
|
||||
/>
|
||||
)}
|
||||
{total_results > 5 && (
|
||||
<div className="col-span-full text-center">
|
||||
<Button href={`/search?s=${query}`} onClick={handleClose}>
|
||||
Pokaż więcej
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,65 +1,177 @@
|
|||
"use client";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { HiMenuAlt3, HiX, HiSparkles } from "react-icons/hi";
|
||||
import { Search } from "./components/Search";
|
||||
|
||||
const links = [
|
||||
{
|
||||
label: "Odkrywaj",
|
||||
href: "/odkrywaj",
|
||||
icon: "🎬",
|
||||
},
|
||||
{
|
||||
label: "Moja Lista",
|
||||
href: "/",
|
||||
icon: "📚",
|
||||
},
|
||||
];
|
||||
|
||||
export const Navbar = () => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
setIsMobileMenuOpen(!isMobileMenuOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="bg-hippie-blue-700 shadow-sm max-sm:sticky top-0 w-full z-30">
|
||||
<div className="container">
|
||||
<div className="flex items-center gap-8 py-4">
|
||||
<Link className="block text-teal-600" href="/">
|
||||
<span className="sr-only">Home</span>
|
||||
<img src="/logo.svg" alt="Logo" width={40} />
|
||||
</Link>
|
||||
<>
|
||||
{/* Main Navbar */}
|
||||
<header className="fixed top-0 w-full z-50 transition-all duration-300">
|
||||
{/* Aurora background effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-900/80 via-blue-900/80 to-teal-900/80 backdrop-blur-xl"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-cyan-500/10"></div>
|
||||
|
||||
<div className="flex flex-1 items-center justify-end md:justify-between">
|
||||
<nav aria-label="Global" className="hidden md:block">
|
||||
<ul className="flex items-center gap-6 text-sm">
|
||||
{links.map((link) => (
|
||||
<li key={link.href}>
|
||||
<Link
|
||||
className="text-text/70 font-semibold hover:text-text"
|
||||
href={link.href}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
{/* Border glow */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-400/50 to-transparent"></div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex gap-4 sm:gap-6">
|
||||
<Search />
|
||||
</div>
|
||||
|
||||
<button className="block rounded-sm bg-gray-100 p-2.5 text-gray-600 transition hover:text- md:hidden">
|
||||
<span className="sr-only">Toggle menu</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="size-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
<div className="relative">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between h-16 lg:h-20">
|
||||
{/* Logo */}
|
||||
<Link
|
||||
href="/"
|
||||
className="group flex items-center gap-3 transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div className="relative">
|
||||
<img
|
||||
src="/logo.svg"
|
||||
alt="MovieBox"
|
||||
className="w-10 h-10 lg:w-12 lg:h-12 transition-all duration-300 group-hover:brightness-110"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-md"></div>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<h1 className="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300 group-hover:from-purple-200 group-hover:to-cyan-200 transition-all duration-300">
|
||||
MovieBox
|
||||
</h1>
|
||||
<div className="flex items-center gap-1">
|
||||
<HiSparkles className="w-3 h-3 text-purple-400 animate-pulse" />
|
||||
<span className="text-xs text-gray-400 font-medium">
|
||||
Premium Experience
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
{links.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="group relative px-4 py-2 rounded-xl transition-all duration-300 hover:bg-white/10 backdrop-blur-sm"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">{link.icon}</span>
|
||||
<span className="font-medium text-gray-300 group-hover:text-white transition-colors duration-300">
|
||||
{link.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-cyan-500/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Search and Mobile Menu */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Search />
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={toggleMobileMenu}
|
||||
className="md:hidden relative p-3 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300 hover:bg-white/20 hover:scale-105"
|
||||
>
|
||||
<div className="w-6 h-6 flex items-center justify-center">
|
||||
{isMobileMenuOpen ? (
|
||||
<HiX className="w-5 h-5 text-white" />
|
||||
) : (
|
||||
<HiMenuAlt3 className="w-5 h-5 text-white" />
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-xl opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="fixed inset-0 z-40 md:hidden">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/70 backdrop-blur-sm transition-opacity duration-300"
|
||||
onClick={toggleMobileMenu}
|
||||
/>
|
||||
|
||||
{/* Menu Panel */}
|
||||
<div className="absolute top-0 right-0 w-80 max-w-[85vw] h-full">
|
||||
{/* Aurora background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-800/95 to-slate-900/95 backdrop-blur-xl"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-cyan-500/10"></div>
|
||||
|
||||
<div className="relative h-full flex flex-col p-6 pt-24">
|
||||
{/* Menu Items */}
|
||||
<nav className="flex-1">
|
||||
<div className="space-y-4">
|
||||
{links.map((link, index) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
onClick={toggleMobileMenu}
|
||||
className="group relative block p-4 rounded-2xl bg-white/5 border border-white/10 transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:scale-105"
|
||||
style={{
|
||||
animationDelay: `${index * 100}ms`,
|
||||
animation: "slideInRight 0.3s ease-out forwards",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500/20 to-cyan-500/20 flex items-center justify-center text-2xl backdrop-blur-sm">
|
||||
{link.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white group-hover:text-purple-200 transition-colors duration-300">
|
||||
{link.label}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
Explore amazing content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-cyan-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue