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
@@ -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,161 +63,157 @@ 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="flex flex-col lg:flex-row gap-8">
|
||||
{/* Profile photo */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="relative group">
|
||||
<img
|
||||
src={
|
||||
personDetails.profile_path
|
||||
? `https://image.tmdb.org/t/p/w500${personDetails.profile_path}`
|
||||
: "/api/placeholder/400/600"
|
||||
}
|
||||
alt={personDetails.name}
|
||||
className="w-80 h-auto rounded-2xl shadow-2xl shadow-purple-500/20 group-hover:shadow-purple-500/40 transition-all duration-500"
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-purple-600/20 to-transparent opacity-100" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
{/* Profile photo */}
|
||||
<div className="flex-shrink-0 text-center">
|
||||
<div className="relative group inline-block">
|
||||
<img
|
||||
src={
|
||||
personDetails.profile_path
|
||||
? `https://image.tmdb.org/t/p/w500${personDetails.profile_path}`
|
||||
: "/api/placeholder/400/600"
|
||||
}
|
||||
alt={personDetails.name}
|
||||
className="w-80 h-auto rounded-2xl shadow-2xl shadow-purple-500/20 group-hover:shadow-purple-500/40 transition-all duration-500"
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-purple-600/20 to-transparent opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actor details */}
|
||||
<div className="flex-1 text-white">
|
||||
<div className="space-y-6">
|
||||
{/* Name and known for */}
|
||||
<div>
|
||||
<h1 className="text-4xl lg:text-5xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
|
||||
{personDetails.name}
|
||||
</h1>
|
||||
{personDetails.birthday && (
|
||||
<span className="text-sm text-gray-400">
|
||||
(
|
||||
{calculateAge(
|
||||
personDetails.birthday,
|
||||
personDetails.deathday
|
||||
)}{" "}
|
||||
lat
|
||||
{personDetails.deathday && " w chwili śmierci"})
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 mb-4 mt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaTheaterMasks className="text-purple-400" />
|
||||
<span className="text-xl text-gray-300 font-medium">
|
||||
{personDetails.known_for_department}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<FaStar className="text-yellow-400" />
|
||||
<span className="text-lg text-gray-300">
|
||||
{Math.round(personDetails.popularity)} popularność
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Also known as */}
|
||||
{personDetails.also_known_as.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<p className="text-gray-400 text-sm">
|
||||
Znany również jako:{" "}
|
||||
{personDetails.also_known_as.slice(0, 3).join(", ")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Personal info */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* Gender */}
|
||||
<div className="flex items-center gap-2 text-gray-300">
|
||||
<span className="text-purple-400">Płeć:</span>
|
||||
<span>{getGenderText(personDetails.gender)}</span>
|
||||
</div>
|
||||
|
||||
{/* Birthday */}
|
||||
{personDetails.birthday && (
|
||||
<div className="flex items-center gap-2 text-gray-300">
|
||||
<FaCalendarAlt className="text-purple-400" />
|
||||
<div className="flex">
|
||||
<span>{formatDate(personDetails.birthday)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Deathday */}
|
||||
{personDetails.deathday && (
|
||||
<div className="flex items-center gap-2 text-gray-300">
|
||||
<FaCalendarAlt className="text-red-400" />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-red-300">Data śmierci:</span>
|
||||
<span>{formatDate(personDetails.deathday)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Place of birth */}
|
||||
{personDetails.place_of_birth && (
|
||||
<div className="flex items-center gap-2 text-gray-300">
|
||||
<FaMapMarkerAlt className="text-purple-400" />
|
||||
<span>{personDetails.place_of_birth}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Biography */}
|
||||
{personDetails.biography && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-3 text-purple-300">
|
||||
Biografia
|
||||
</h3>
|
||||
<div className="text-gray-300 leading-relaxed text-lg space-y-4">
|
||||
{personDetails.biography
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index}>{paragraph}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Actor details */}
|
||||
<div className="flex-1 text-white">
|
||||
<div className="space-y-6">
|
||||
{/* Name and known for */}
|
||||
<div>
|
||||
<h1 className="text-4xl lg:text-5xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
|
||||
{personDetails.name}
|
||||
</h1>
|
||||
{personDetails.birthday && (
|
||||
<span className="text-sm text-gray-400">
|
||||
(
|
||||
{calculateAge(
|
||||
personDetails.birthday,
|
||||
personDetails.deathday
|
||||
)}{" "}
|
||||
lat
|
||||
{personDetails.deathday && " w chwili śmierci"})
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* External links */}
|
||||
{personDetails.external_ids && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-3 text-purple-300">
|
||||
Linki
|
||||
</h3>
|
||||
<div className="flex gap-4">
|
||||
{Object.entries(personDetails.external_ids).map(
|
||||
([key, value]) => {
|
||||
if (!(key in externalIdsMap) || !value) {
|
||||
return null;
|
||||
}
|
||||
<div className="flex items-center gap-4 mb-4 mt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaTheaterMasks className="text-purple-400" />
|
||||
<span className="text-xl text-gray-300 font-medium">
|
||||
{personDetails.known_for_department}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
const { label, icon, url } =
|
||||
externalIdsMap[
|
||||
key as keyof typeof externalIdsMap
|
||||
];
|
||||
return (
|
||||
<a
|
||||
key={key}
|
||||
href={url(value as string)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-xl transition-all duration-300 border border-white/20"
|
||||
>
|
||||
{icon}
|
||||
{label}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<FaStar className="text-yellow-400" />
|
||||
<span className="text-lg text-gray-300">
|
||||
{Math.round(personDetails.popularity)} popularność
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Also known as */}
|
||||
{personDetails.also_known_as.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<p className="text-gray-400 text-sm">
|
||||
Znany również jako:{" "}
|
||||
{personDetails.also_known_as.slice(0, 3).join(", ")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Personal info */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* Gender */}
|
||||
<div className="flex items-center gap-2 text-gray-300">
|
||||
<span className="text-purple-400">Płeć:</span>
|
||||
<span>{getGenderText(personDetails.gender)}</span>
|
||||
</div>
|
||||
|
||||
{/* Birthday */}
|
||||
{personDetails.birthday && (
|
||||
<div className="flex items-center gap-2 text-gray-300">
|
||||
<FaCalendarAlt className="text-purple-400" />
|
||||
<div className="flex">
|
||||
<span>{formatDate(personDetails.birthday)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Deathday */}
|
||||
{personDetails.deathday && (
|
||||
<div className="flex items-center gap-2 text-gray-300">
|
||||
<FaCalendarAlt className="text-red-400" />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-red-300">Data śmierci:</span>
|
||||
<span>{formatDate(personDetails.deathday)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Place of birth */}
|
||||
{personDetails.place_of_birth && (
|
||||
<div className="flex items-center gap-2 text-gray-300">
|
||||
<FaMapMarkerAlt className="text-purple-400" />
|
||||
<span>{personDetails.place_of_birth}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Biography */}
|
||||
{personDetails.biography && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-3 text-purple-300">
|
||||
Biografia
|
||||
</h3>
|
||||
<div className="text-gray-300 leading-relaxed text-lg space-y-4">
|
||||
{personDetails.biography
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index}>{paragraph}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* External links */}
|
||||
{personDetails.external_ids && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-3 text-purple-300">
|
||||
Linki
|
||||
</h3>
|
||||
<div className="flex gap-4">
|
||||
{Object.entries(personDetails.external_ids).map(
|
||||
([key, value]) => {
|
||||
if (!(key in externalIdsMap) || !value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { label, icon, url } =
|
||||
externalIdsMap[key as keyof typeof externalIdsMap];
|
||||
return (
|
||||
<a
|
||||
key={key}
|
||||
href={url(value as string)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-xl transition-all duration-300 border border-white/20"
|
||||
>
|
||||
{icon}
|
||||
{label}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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,71 +43,69 @@ export const Gallery: FC<Props> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-16">
|
||||
<div className="px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{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">
|
||||
<FaImages className="text-white" size={20} />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
|
||||
{heading}
|
||||
</h2>
|
||||
<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">
|
||||
<FaImages className="text-white" size={20} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Category tabs */}
|
||||
{categories.length > 0 && (
|
||||
<div className="flex gap-4 mb-8">
|
||||
{Object.entries(images).map(([category, categoryImages]) => {
|
||||
if (!categoryImages.length) return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() =>
|
||||
setSelectedCategory(category as keyof typeof images)
|
||||
}
|
||||
className={`px-6 py-3 rounded-xl font-medium transition-all duration-300 ${
|
||||
selectedCategory === category
|
||||
? "bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg"
|
||||
: "bg-white/10 text-gray-300 hover:bg-white/20 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{category} ({categoryImages.length})
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Image grid */}
|
||||
<div className={`grid gap-4 grid-auto-cols-160 [&>div]:contents`}>
|
||||
<LightGallery>
|
||||
{currentImages.slice(0, limit).map((image, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={getImageUrl(image.file_path)}
|
||||
className="group relative overflow-hidden rounded-xl cursor-pointer bg-slate-800"
|
||||
>
|
||||
<img src={getImageUrl(image.file_path, "w185")} />
|
||||
</a>
|
||||
))}
|
||||
</LightGallery>
|
||||
<h2 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
|
||||
{heading}
|
||||
</h2>
|
||||
</div>
|
||||
{limit < currentImages.length && (
|
||||
<div className="flex justify-center mt-6">
|
||||
<Button
|
||||
theme="teal"
|
||||
size="small"
|
||||
onClick={() => setLimit(currentImages.length)}
|
||||
)}
|
||||
|
||||
{/* Category tabs */}
|
||||
{categories.length > 0 && (
|
||||
<div className="flex gap-4 mb-8">
|
||||
{Object.entries(images).map(([category, categoryImages]) => {
|
||||
if (!categoryImages.length) return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() =>
|
||||
setSelectedCategory(category as keyof typeof images)
|
||||
}
|
||||
className={`px-6 py-3 rounded-xl font-medium transition-all duration-300 ${
|
||||
selectedCategory === category
|
||||
? "bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg"
|
||||
: "bg-white/10 text-gray-300 hover:bg-white/20 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{category} ({categoryImages.length})
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Image grid */}
|
||||
<div className={`grid gap-4 grid-auto-cols-160 [&>div]:contents`}>
|
||||
<LightGallery>
|
||||
{currentImages.slice(0, limit).map((image, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={getImageUrl(image.file_path)}
|
||||
className="group relative overflow-hidden rounded-xl cursor-pointer bg-slate-800"
|
||||
>
|
||||
Pokaż wszystkie ({currentImages.length - limit})
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<img src={getImageUrl(image.file_path, "w185")} />
|
||||
</a>
|
||||
))}
|
||||
</LightGallery>
|
||||
</div>
|
||||
{limit < currentImages.length && (
|
||||
<div className="flex justify-center mt-6">
|
||||
<Button
|
||||
theme="teal"
|
||||
size="small"
|
||||
onClick={() => setLimit(currentImages.length)}
|
||||
>
|
||||
Pokaż wszystkie ({currentImages.length - limit})
|
||||
</Button>
|
||||
</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">
|
||||
<Carousel
|
||||
heading="Rekomendowane filmy"
|
||||
icon={<FaStar />}
|
||||
colors="yellow"
|
||||
>
|
||||
{movies.results.map((movie) => (
|
||||
<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
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.release_date).getTime() -
|
||||
new Date(a.release_date).getTime()
|
||||
)
|
||||
.map((movie) => (
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
layout="aurora"
|
||||
@@ -43,8 +48,7 @@ export const RecommendedMovies: FC<Props> = ({ movies }) => {
|
||||
favorite={false}
|
||||
/>
|
||||
))}
|
||||
</Carousel>
|
||||
</div>
|
||||
</Carousel>
|
||||
</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
|
||||
|
||||
Reference in New Issue
Block a user