gitadmin/moviebox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove blur effects from AuroraBackground and various components for improved performance and visual clarity

Browse Source
This commit is contained in:
Norbert Maciaszek
2025-08-21 18:23:29 +02:00
parent 9051d4887c
commit a440debaff
8 changed files with 102 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/molecules/HeroMovie/index.tsx
View File

@@ -87,12 +87,12 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
<div className="container">
<div className="flex flex-col lg:flex-row gap-8">
{/* Movie poster */}
<div className="flex-shrink-0">
<div className="relative group">
<div className="flex-shrink-0 text-center">
<div className="relative group inline-block">
<img
src={`https://image.tmdb.org/t/p/w500${movieDetails.poster_path}`}
alt={movieDetails.title}
className="w-80 h-auto rounded-2xl shadow-2xl shadow-purple-500/20 group-hover:shadow-purple-500/40 transition-all duration-500"
className="w-80 h-auto rounded-2xl shadow-2xl shadow-purple-500/20"
/>
<div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-purple-600/20 to-transparent opacity-100" />
</div>

2
src/components/molecules/MovieCast/index.tsx
View File

@@ -54,7 +54,7 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
{/* Hover overlay with link indication */}
<div className="absolute inset-0 bg-purple-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<div className="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-white text-sm font-medium">
<div className="bg-white/20 px-3 py-1 rounded-full text-white text-sm font-medium">
Zobacz profil
</div>
</div>

77
src/components/molecules/MovieList/index.tsx
View File

@@ -1,13 +1,17 @@
"use client";
import { FC, useState } from "react";
import { FC, ReactNode, useState } from "react";
import { MovieCard } from "@/components/atoms/MovieCard";
import { Movie } from "@/types/global";
import { useGlobalStore } from "@/app/store/globalStore";
import { Dropdown } from "@/components/atoms/Dropdown";
import { useAutoAnimate } from "@formkit/auto-animate/react";
import { Button } from "@/components/atoms/Button";
type Props = {
heading?: string;
icon?: ReactNode;
colors?: keyof typeof colorsMap;
overrideMovies?: Movie[];
filterSeen?: 0 | 1;
@@ -19,10 +23,14 @@ type Props = {
showFilters?: boolean;
sort?: "title" | "releaseDate" | "popularity";
sortDirection?: "asc" | "desc";
loadMore?: boolean;
};
export const MovieList: FC<Props> = ({
heading,
icon,
colors = "white",
overrideMovies,
filterSeen,
filterFavorites,
@@ -32,15 +40,17 @@ export const MovieList: FC<Props> = ({
showFilters = true,
sort = "releaseDate",
sortDirection = "asc",
loadMore = false,
}) => {
const { movies: storeMovies } = useGlobalStore();
const movies = overrideMovies || storeMovies;
const [filter, setFilter] = useState<"title" | "releaseDate" | "popularity">(
sort
);
const [loaded, setLoaded] = useState(loadMore ? 4 : movies.length);
const [parent] = useAutoAnimate();
const movies = overrideMovies || storeMovies;
const filteredMovies = movies.filter((movie) => {
let result = true;
const today = new Date();
@@ -73,6 +83,8 @@ export const MovieList: FC<Props> = ({
return 0;
});
sortedMovies = sortedMovies.slice(0, loaded);
if (sortDirection === "desc") {
sortedMovies = sortedMovies.reverse();
}
@@ -81,21 +93,30 @@ export const MovieList: FC<Props> = ({
<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">
{showFilters && (
<Dropdown
items={[
{ label: "Tytuł", value: "title" },
{ label: "Data premiery", value: "releaseDate" },
{ label: "Popularność", value: "popularity" },
]}
defaultValue={filter}
callback={(value) => setFilter(value as "title")}
/>
)}
<h2 className="text-2xl font-bold">{heading}</h2>
</div>
<div className="flex items-center gap-3">
{icon && (
<div
className={`hidden sm:block p-2 rounded-lg ${colorsMap[colors]}`}
>
{icon}
</div>
)}
{showFilters && !icon && (
<Dropdown
items={[
{ label: "Tytuł", value: "title" },
{ label: "Data premiery", value: "releaseDate" },
{ label: "Popularność", value: "popularity" },
]}
defaultValue={filter}
callback={(value) => setFilter(value as "title")}
/>
)}
<h2
className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent text-center sm:text-left`}
>
{heading}
</h2>
</div>
)}
{filteredMovies.length === 0 && (
@@ -111,7 +132,27 @@ export const MovieList: FC<Props> = ({
))}
</div>
)}
{loadMore && filteredMovies.length > loaded && (
<div className="flex justify-center mt-10">
<Button theme="teal" onClick={() => setLoaded(movies.length)}>
Pokaż więcej
</Button>
</div>
)}
</div>
</section>
);
};
const colorsMap = {
white: "bg-gradient-to-r from-white to-gray-300",
yellow: "bg-gradient-to-r from-yellow-400 to-orange-400",
blue: "bg-gradient-to-r from-blue-400 to-purple-400",
green: "bg-gradient-to-r from-green-400 to-teal-400",
red: "bg-gradient-to-r from-red-400 to-pink-400",
purple: "bg-gradient-to-r from-purple-400 to-pink-400",
orange: "bg-gradient-to-r from-orange-400 to-yellow-400",
pink: "bg-gradient-to-r from-pink-400 to-purple-400",
teal: "bg-gradient-to-r from-teal-400 to-green-400",
gray: "bg-gradient-to-r from-gray-400 to-gray-400",
};