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

src/components/molecules/MovieList/index.tsx

@@ -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",
+};