feat: replace MovieGallery with new Gallery component for improved image handling; update styles and functionality in related components

2025-08-18 14:18:46 +02:00
parent f15137fd6c
commit e891b37384
5 changed files with 124 additions and 228 deletions
--- a/src/components/molecules/Gallery/index.tsx
+++ b/src/components/molecules/Gallery/index.tsx
@@ -0,0 +1,114 @@
+"use client";
+import { FC, useState } from "react";
+import { FaImages } from "react-icons/fa";
+import LightGallery from "lightgallery/react";
+
+// import styles
+import "lightgallery/css/lightgallery.css";
+import "lightgallery/css/lg-zoom.css";
+import "lightgallery/css/lg-thumbnail.css";
+import { Button } from "@/components/atoms/Button";
+
+type ImageData = {
+  aspect_ratio: number;
+  file_path: string;
+  height: number;
+  width: number;
+};
+
+type Props = {
+  heading?: string;
+  images: ImageData[] | Record<string, ImageData[]>;
+  limit?: number;
+};
+
+export const Gallery: FC<Props> = ({
+  images,
+  heading,
+  limit: initialLimit = 14,
+}) => {
+  const categories = Array.isArray(images) ? [] : Object.keys(images);
+  const [limit, setLimit] = useState(initialLimit);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(
+    categories[0] || null
+  );
+
+  const currentImages: ImageData[] =
+    selectedCategory && typeof images === "object"
+      ? (images[selectedCategory as keyof typeof images] as ImageData[])
+      : (images as ImageData[]);
+
+  const getImageUrl = (path: string, size: string = "w500") => {
+    return `https://image.tmdb.org/t/p/${size}${path}`;
+  };
+
+  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>
+            </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>
+          </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>
+      </div>
+    </section>
+  );
+};