feat: implement responsive container utility and enhance layout styles across components; update Carousel and Gallery for improved structure and consistency
This commit is contained in:
Norbert Maciaszek
parent
e891b37384
commit
fd1240252d
|
|
@ -16,22 +16,30 @@ export default async function Page({
|
|||
const personDetails = await TMDB.getPersonDetails(actorId);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 pb-16">
|
||||
<div className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 py-0.5">
|
||||
<ActorHero personDetails={personDetails} />
|
||||
<Gallery images={personDetails.images.profiles} heading="Galeria" />
|
||||
<section className="blocks">
|
||||
<div className="container">
|
||||
<Carousel
|
||||
heading={`Filmy z udziałem ${personDetails.name}`}
|
||||
icon={<FaStar />}
|
||||
colors="purple"
|
||||
>
|
||||
{personDetails.movie_credits.cast.map((movie) => {
|
||||
{personDetails.movie_credits.cast
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.release_date).getTime() -
|
||||
new Date(a.release_date).getTime()
|
||||
)
|
||||
.map((movie) => {
|
||||
const convertedMovie = convertToMovie(movie);
|
||||
if (!convertedMovie) return null;
|
||||
return <MovieCard key={movie.id} {...convertedMovie} />;
|
||||
})}
|
||||
</Carousel>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@ export default async function Page({
|
|||
const movieDetails = await TMDB.getMovieDetails(movieId);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen mt-16">
|
||||
<>
|
||||
<HeroMovie movieDetails={movieDetails} />
|
||||
<MovieCast movieDetails={movieDetails} />
|
||||
<RecommendedMovies movies={movieDetails.recommendations} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,18 +46,30 @@
|
|||
|
||||
@custom-variant hover-any (&:hover);
|
||||
|
||||
@utility container {
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
@variant sm {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
@variant lg {
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
@variant xl {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-hippie-blue-950 text-text;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
|
@ -71,6 +83,22 @@
|
|||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
.blocks {
|
||||
margin: 32px 0;
|
||||
|
||||
@variant lg {
|
||||
margin: 64px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blockp {
|
||||
padding: 32px 0;
|
||||
|
||||
@variant lg {
|
||||
padding: 64px 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@apply transition-colors;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,9 +34,7 @@ export default async function RootLayout({
|
|||
<GlobalStoreProvider>
|
||||
<AuroraBackground />
|
||||
<Navbar />
|
||||
<main className="relative pt-16 lg:pt-20 [&>:last-child]:mb-0">
|
||||
{children}
|
||||
</main>
|
||||
<main className="relative">{children}</main>
|
||||
</GlobalStoreProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -47,63 +47,41 @@ export default async function Home() {
|
|||
<>
|
||||
<Hero movies={heroMovies} autoRotate />
|
||||
|
||||
<div className="container py-16 space-y-16">
|
||||
<section>
|
||||
<section className="blocks">
|
||||
<Carousel heading="Teraz w kinach" icon={<FaPlay />}>
|
||||
{nowPlayingMovies.map((movie) => (
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
{...movie}
|
||||
simpleToggle
|
||||
layout="aurora"
|
||||
/>
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
|
||||
))}
|
||||
</Carousel>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section className="blocks">
|
||||
<Carousel
|
||||
heading="Nadchodzące filmy"
|
||||
icon={<FaCalendar />}
|
||||
colors="blue"
|
||||
>
|
||||
{upcomingMovies.map((movie) => (
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
{...movie}
|
||||
simpleToggle
|
||||
layout="aurora"
|
||||
/>
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
|
||||
))}
|
||||
</Carousel>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section className="blocks">
|
||||
<Carousel heading="Popularne filmy" icon={<FaFire />} colors="red">
|
||||
{popularMovies.map((movie) => (
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
{...movie}
|
||||
simpleToggle
|
||||
layout="aurora"
|
||||
/>
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
|
||||
))}
|
||||
</Carousel>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section className="blocks">
|
||||
<Carousel heading="Trendy dnia" icon={<FaChartLine />} colors="green">
|
||||
{trendingMovies.map((movie) => (
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
{...movie}
|
||||
simpleToggle
|
||||
layout="aurora"
|
||||
/>
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
|
||||
))}
|
||||
</Carousel>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="p-2 text-center text-xs text-gray-500">
|
||||
<p>Ostatnia aktualizacja: {lastModified}</p>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ type Props = {
|
|||
children: React.ReactNode;
|
||||
className?: string;
|
||||
theme?: Theme;
|
||||
size?: "small" | "medium" | "large";
|
||||
size?: "small" | "medium" | "large" | "icon";
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
gradient?: {
|
||||
|
|
@ -31,7 +31,7 @@ export const Button: FC<Props> = ({
|
|||
|
||||
return (
|
||||
<Component
|
||||
className={`flex items-center justify-center gap-2 cursor-pointer text-white rounded-xl font-semibold shadow-2xl transition-all duration-300 hover:scale-105
|
||||
className={`flex items-center justify-center gap-2 cursor-pointer text-white rounded-xl font-semibold shadow-2xl transition-colors duration-300
|
||||
bg-gradient-to-r ${buttonColor?.from} ${buttonColor?.to} cursor-pointer ${sizes[size]} ${className}`}
|
||||
onClick={onClick}
|
||||
{...(href && { href })}
|
||||
|
|
@ -45,6 +45,7 @@ const sizes = {
|
|||
small: "px-4 py-2 text-sm",
|
||||
medium: "px-8 py-4 text-lg",
|
||||
large: "px-12 py-6 text-xl",
|
||||
icon: "p-3 [&>*]:w-5 [&>*]:h-5",
|
||||
};
|
||||
|
||||
const colors = {
|
||||
|
|
@ -57,7 +58,7 @@ const colors = {
|
|||
to: "to-pink-600 hover:to-pink-500",
|
||||
},
|
||||
glass: {
|
||||
from: "from-white/15 via-white/8 to-white/12",
|
||||
from: "from-white/15 via-white/8 to-white/12 border border-white/20",
|
||||
to: "to-white/15 hover:to-white/10",
|
||||
},
|
||||
rose: {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
|
|||
: "from-red-400 to-pink-400";
|
||||
|
||||
return (
|
||||
<article className="group relative w-full overflow-hidden rounded-2xl">
|
||||
<article className="group relative w-full overflow-hidden rounded-2xl max-w-[300px] mx-auto">
|
||||
{/* Aurora background effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-teal-900/20 opacity-60"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-pink-500/10 via-transparent to-cyan-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-1000"></div>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<section className="pt-16 pb-8">
|
||||
<section className="blocks">
|
||||
<div className="relative">
|
||||
{/* Navigation */}
|
||||
<div className="absolute top-0 left-0 right-0 z-20 px-6">
|
||||
|
|
@ -63,12 +63,11 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
|
|||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="relative z-10 px-6 lg:px-8 mt-16">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="container">
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
{/* Profile photo */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="relative group">
|
||||
<div className="flex-shrink-0 text-center">
|
||||
<div className="relative group inline-block">
|
||||
<img
|
||||
src={
|
||||
personDetails.profile_path
|
||||
|
|
@ -197,9 +196,7 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
|
|||
}
|
||||
|
||||
const { label, icon, url } =
|
||||
externalIdsMap[
|
||||
key as keyof typeof externalIdsMap
|
||||
];
|
||||
externalIdsMap[key as keyof typeof externalIdsMap];
|
||||
return (
|
||||
<a
|
||||
key={key}
|
||||
|
|
@ -222,7 +219,6 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ type Props = {
|
|||
heading?: string;
|
||||
icon?: ReactNode;
|
||||
colors?: keyof typeof colorsMap;
|
||||
fluid?: boolean;
|
||||
};
|
||||
|
||||
export const Carousel: FC<Props> = ({
|
||||
|
|
@ -24,6 +25,7 @@ export const Carousel: FC<Props> = ({
|
|||
heading,
|
||||
icon,
|
||||
colors = "yellow",
|
||||
fluid = false,
|
||||
}) => {
|
||||
const {
|
||||
itemsPerView = 4,
|
||||
|
|
@ -66,17 +68,19 @@ export const Carousel: FC<Props> = ({
|
|||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className={`${fluid ? "max-w-full px-4" : "container"}`}>
|
||||
<div className="flex items-center justify-between mb-8 flex-wrap">
|
||||
{heading && (
|
||||
<div className="flex items-center gap-3">
|
||||
{icon && (
|
||||
<div className={`p-2 rounded-lg ${colorsMap[colors]}`}>
|
||||
<div
|
||||
className={`hidden sm:block p-2 rounded-lg ${colorsMap[colors]}`}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
<h2
|
||||
className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent`}
|
||||
className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent text-center sm:text-left`}
|
||||
>
|
||||
{heading}
|
||||
</h2>
|
||||
|
|
@ -84,7 +88,7 @@ export const Carousel: FC<Props> = ({
|
|||
)}
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-2 mx-auto mt-4 sm:mt-0 sm:mr-0 sm:ml-auto">
|
||||
<button
|
||||
onClick={prevPage}
|
||||
className={`cursor-pointer p-3 rounded-full ${colorsMap[colors]} text-white transition-all duration-300`}
|
||||
|
|
@ -116,7 +120,7 @@ export const Carousel: FC<Props> = ({
|
|||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex justify-center mt-8">
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-2 flex-wrap justify-center">
|
||||
{Array.from({ length: totalPages }, (_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
|
|
|
|||
|
|
@ -43,9 +43,8 @@ export const Gallery: FC<Props> = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<section className="py-16">
|
||||
<div className="px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<section className="blocks">
|
||||
<div className="container">
|
||||
{heading && (
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="p-2 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500">
|
||||
|
|
@ -108,7 +107,6 @@ export const Gallery: FC<Props> = ({
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<section className="my-16">
|
||||
<section className="blocks">
|
||||
<div className="relative">
|
||||
{/* Navigation */}
|
||||
<div className="absolute top-0 left-0 right-0 z-20 px-6">
|
||||
|
|
@ -83,8 +83,8 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
|
|||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="relative z-10 px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="relative z-10">
|
||||
<div className="container">
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
{/* Movie poster */}
|
||||
<div className="flex-shrink-0">
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
|
|||
}).format(amount);
|
||||
|
||||
return (
|
||||
<section className="px-6 lg:px-8 py-16">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<section className="blocks">
|
||||
<div className="container mx-auto">
|
||||
<div className="grid lg:grid-cols-3 gap-12">
|
||||
{/* Cast */}
|
||||
{mainCast.length > 0 && (
|
||||
<div className="lg:col-span-2">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Obsada</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
|
||||
{mainCast.map((actor) => (
|
||||
<Link
|
||||
key={actor.id}
|
||||
|
|
|
|||
|
|
@ -78,8 +78,8 @@ export const MovieList: FC<Props> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<section className="my-4 md:my-10">
|
||||
<div className={`${fluid ? "max-w-full" : "container"}`}>
|
||||
<section className="blocks">
|
||||
<div className={`${fluid ? "max-w-full px-4" : "container"}`}>
|
||||
{heading && (
|
||||
<div className="row">
|
||||
<div className="col-12 md:col-10 flex gap-2 items-center">
|
||||
|
|
@ -103,7 +103,7 @@ export const MovieList: FC<Props> = ({
|
|||
)}
|
||||
{filteredMovies.length > 0 && (
|
||||
<div
|
||||
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-6 gap-3 sm:gap-6 mt-8 justify-center"
|
||||
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-6 gap-3 sm:gap-6 mt-8 justify-center"
|
||||
ref={parent}
|
||||
>
|
||||
{sortedMovies.map((movie) => (
|
||||
|
|
|
|||
|
|
@ -13,15 +13,20 @@ export const RecommendedMovies: FC<Props> = ({ movies }) => {
|
|||
if (!movies.results.length) return null;
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-gradient-to-br from-slate-900/50 to-slate-800/50">
|
||||
<div className="px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<section className="blockp bg-gradient-to-br from-slate-900/50 to-slate-800/50">
|
||||
<div className="container">
|
||||
<Carousel
|
||||
heading="Rekomendowane filmy"
|
||||
icon={<FaStar />}
|
||||
colors="yellow"
|
||||
>
|
||||
{movies.results.map((movie) => (
|
||||
{movies.results
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.release_date).getTime() -
|
||||
new Date(a.release_date).getTime()
|
||||
)
|
||||
.map((movie) => (
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
layout="aurora"
|
||||
|
|
@ -45,7 +50,6 @@ export const RecommendedMovies: FC<Props> = ({ movies }) => {
|
|||
))}
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export const SimilarMovies: FC<Props> = ({ movies }) => {
|
|||
return (
|
||||
<section className="py-16">
|
||||
<div className="px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="container mx-auto">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-3xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
|
||||
Podobne filmy
|
||||
|
|
|
|||
|
|
@ -49,16 +49,12 @@ export const Search = () => {
|
|||
return (
|
||||
<>
|
||||
<Button
|
||||
theme="glass"
|
||||
size="small"
|
||||
theme="secondary"
|
||||
size="icon"
|
||||
className="group relative"
|
||||
onClick={() => setIsSearchOpen(!isSearchOpen)}
|
||||
>
|
||||
<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>
|
||||
<IoSearch className="text-white" />
|
||||
</Button>
|
||||
|
||||
{isSearchOpen && (
|
||||
|
|
@ -71,14 +67,11 @@ export const Search = () => {
|
|||
{/* Close button */}
|
||||
<Button
|
||||
theme="glass"
|
||||
size="small"
|
||||
size="icon"
|
||||
className="absolute top-6 right-6 z-10 group hover:!bg-red-500/50"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<IoClose
|
||||
size={24}
|
||||
className="text-white transition-transform duration-300 group-hover:rotate-90"
|
||||
/>
|
||||
<IoClose className="text-white transition-transform duration-300 group-hover:rotate-90" />
|
||||
</Button>
|
||||
|
||||
<div className="relative min-h-full flex flex-col py-20" ref={ref}>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
|
|||
import { HiMenuAlt3, HiX, HiSparkles } from "react-icons/hi";
|
||||
import { Search } from "./components/Search";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Button } from "@/components/atoms/Button";
|
||||
|
||||
const links = [
|
||||
{
|
||||
|
|
@ -33,7 +34,7 @@ export const Navbar = () => {
|
|||
return (
|
||||
<>
|
||||
{/* Main Navbar */}
|
||||
<header className="fixed top-0 w-full z-50 transition-all duration-300">
|
||||
<header className="sticky top-0 w-full z-50 transition-all duration-300">
|
||||
{/* Aurora background effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-slate-900/95 via-slate-800/98 to-slate-900/95"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-600/15 via-blue-600/10 to-teal-600/15"></div>
|
||||
|
|
@ -43,7 +44,7 @@ export const Navbar = () => {
|
|||
<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="relative">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className=" mx-auto px-4 max-w-[1500px]">
|
||||
<div className="flex items-center justify-between h-16 lg:h-20">
|
||||
{/* Logo */}
|
||||
<Link
|
||||
|
|
@ -95,19 +96,18 @@ export const Navbar = () => {
|
|||
<Search />
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
<Button
|
||||
theme="glass"
|
||||
size="icon"
|
||||
onClick={toggleMobileMenu}
|
||||
className="md:hidden relative p-3 rounded-xl bg-gradient-to-br from-white/15 to-white/5 border border-white/20 transition-all duration-300 hover:bg-gradient-to-br hover:from-white/25 hover:to-white/10 hover:scale-105 shadow-lg"
|
||||
className="md:hidden"
|
||||
>
|
||||
<div className="w-6 h-6 flex items-center justify-center">
|
||||
{isMobileMenuOpen ? (
|
||||
<HiX className="w-5 h-5 text-white" />
|
||||
<HiX className="text-white" />
|
||||
) : (
|
||||
<HiMenuAlt3 className="w-5 h-5 text-white" />
|
||||
<HiMenuAlt3 className="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>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue