media

2026-04-07 16:20:18 +07:00
parent 91f3b16634
commit e3065e1bf5
16 changed files with 442 additions and 195 deletions
--- a/src/components/user-profile/Media.tsx
+++ b/src/components/user-profile/Media.tsx
@@ -0,0 +1,73 @@
+"use client";
+import { useState } from "react";
+import Lightbox from "yet-another-react-lightbox";
+import Zoom from "yet-another-react-lightbox/plugins/zoom";
+import Captions from "yet-another-react-lightbox/plugins/captions";
+import "yet-another-react-lightbox/styles.css";
+import "yet-another-react-lightbox/plugins/captions.css";
+import { MediaDto } from "@/interface/media";
+import { URL_MEDIA } from "../../../api";
+
+export default function MediaCard({ data }: { data: MediaDto }) {
+  const [index, setIndex] = useState(-1);
+  const listMedia = data?.data || [];
+
+  const slides = listMedia.map((item) => ({
+    src: `${URL_MEDIA}${item.storage_key}`,
+    title: item.original_name,
+    description: `Size: ${(item.size / 1024).toFixed(2)} KB - Type: ${item.mime_type}`,
+  }));
+
+  return (
+    <div className="w-full">
+      <h3 className="mb-4 font-semibold">Media Assets</h3>
+
+      <div className="flex flex-row gap-4 overflow-x-auto pb-4 scrollbar-hide">
+        {listMedia.map((item, idx) => (
+          <div
+            key={item.id}
+            onClick={() => setIndex(idx)}
+            className="group relative min-w-[150px] h-[150px] cursor-pointer overflow-hidden rounded-lg border border-gray-200"
+          >
+            <img
+              src={`${URL_MEDIA}${item.storage_key}`}
+              alt={item.original_name}
+              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110"
+            />
+
+            <div className="absolute inset-0 flex items-end bg-black/40 p-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <p className="w-full truncate text-xs text-white">
+                {item.original_name}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <Lightbox
+        index={index}
+        open={index >= 0}
+        close={() => setIndex(-1)}
+        slides={slides}
+        plugins={[Zoom, Captions]}
+        zoom={{
+          maxZoomPixelRatio: 10,
+          zoomInMultiplier: 2,
+          doubleTapDelay: 300,
+          doubleClickDelay: 300,
+          doubleClickMaxStops: 2,
+          keyboardMoveDistance: 50,
+          wheelZoomDistanceFactor: 100,
+          pinchZoomDistanceFactor: 100,
+        }}
+        animation={{ zoom: 200 }}
+        styles={{
+          root: {
+            zIndex: 999999999,
+            "--yarl__color_backdrop": "rgba(0, 0, 0, 0.85)",
+          },
+        }}
+      />
+    </div>
+  );
+}