feat: enhance MovieList and MovieRow components with display type toggle and additional props for improved flexibility

src/components/molecules/MovieList/index.tsx

@@ -7,11 +7,14 @@ import { Dropdown } from "@/components/atoms/Dropdown";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { Button } from "@/components/atoms/Button";
 import { Label } from "@/components/atoms/Label";
+import { FaList } from "react-icons/fa";
+import { MovieRow } from "@/components/atoms/MovieRow";
 
 type Props = {
   heading?: string;
   icon?: ReactNode;
   colors?: keyof typeof colorsMap;
+  displayType?: "grid" | "list";
 
   overrideMovies?: Movie[];
 
@@ -44,10 +47,12 @@ export const MovieList: FC<Props> = ({
   sort: sortType = "releaseDate",
   sortDirection = "asc",
   loadMore = false,
+  displayType = "grid",
 }) => {
   const { movies: storeMovies } = useGlobalStore();
   const movies = overrideMovies || storeMovies;
 
+  const [display, setDisplay] = useState<"grid" | "list">(displayType);
   const [filter, setFilter] = useState({
     seen: filterSeenInitial,
     favorites: filterFavoritesInitial,
@@ -58,7 +63,7 @@ export const MovieList: FC<Props> = ({
     sortType
   );
 
-  const [loaded, setLoaded] = useState(loadMore ? 4 : movies.length);
+  const [loaded, setLoaded] = useState(loadMore ? 8 : movies.length);
   const [parent] = useAutoAnimate();
 
   const filteredMovies = movies.filter((movie) => {
@@ -189,6 +194,15 @@ export const MovieList: FC<Props> = ({
                   defaultValue={sort}
                   callback={(value) => setSort(value as "title")}
                 />
+                <Button
+                  theme="glass"
+                  size="icon"
+                  onClick={() =>
+                    setDisplay(display === "grid" ? "list" : "grid")
+                  }
+                >
+                  <FaList />
+                </Button>
               </div>
             )}
           </div>
@@ -201,14 +215,22 @@ export const MovieList: FC<Props> = ({
             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) => (
-              <MovieCard key={movie.id} layout="aurora" {...movie} />
-            ))}
+            {sortedMovies.map((movie) =>
+              display === "grid" ? (
+                <MovieCard key={movie.id} layout="aurora" {...movie} />
+              ) : (
+                <MovieRow key={movie.id} movie={movie} compact />
+              )
+            )}
           </div>
         )}
         {loadMore && filteredMovies.length > loaded && (
           <div className="flex justify-center mt-10">
-            <Button theme="teal" onClick={() => setLoaded(movies.length)}>
+            <Button
+              size="small"
+              theme="glass"
+              onClick={() => setLoaded(movies.length)}
+            >
               Pokaż więcej
             </Button>
           </div>