-
-
- = ({
+ asset,
+ onEdit,
+ className = "",
+ showActions = true,
+}) => {
+ const [isLoading, setIsLoading] = useState(false);
+ const { isOpen, onOpen, onOpenChange } = useDisclosure();
+ const qc = getQueryClient();
+
+ const formatFileSize = (bytes?: number): string => {
+ if (!bytes) return "Unknown size";
+ const k = 1024;
+ const sizes = ["Bytes", "KB", "MB", "GB"];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+ };
+
+ const formatDate = (date: Date): string => {
+ return new Date(date).toLocaleDateString("en-US", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ });
+ };
+
+ const handleView = () => {
+ onOpen();
+ };
+
+ const handleDelete = async () => {
+ setIsLoading(true);
+ try {
+ await fetcher("DELETE", `/gallery/${asset.galleryId}/assets/${asset.id}`);
+ await qc.invalidateQueries({
+ queryKey: ["gallery-assets", "default"],
+ });
+ } catch (error: any) {
+ console.error("Delete failed:", error);
+ addToast({
+ title: "Unable to delete asset",
+ description: error?.message || "An unexpected error occurred.",
+ color: "danger",
+ });
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleDownload = async () => {
+ try {
+ const response = await fetch(asset.url);
+ const blob = await response.blob();
+ const url = window.URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = asset.title || asset.externalKey;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ window.URL.revokeObjectURL(url);
+ } catch (error) {
+ console.error("Download failed:", error);
+ }
+ };
+
+ const renderAssetPreview = () => {
+ if (asset.type === "IMAGE") {
+ return (
+
+
+
+
+
+
+
+
+
+
+ {(onClose) => (
+ <>
+
+
+
+ {showActions && (
+
+
+ )}
+
+
+
+ );
+};
+
+export default AssetCard;
diff --git a/src/components/gallery/AssetEditModal.tsx b/src/components/gallery/AssetEditModal.tsx
new file mode 100644
index 0000000..ccd1cc1
--- /dev/null
+++ b/src/components/gallery/AssetEditModal.tsx
@@ -0,0 +1,259 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import {
+ Modal,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
+ ModalFooter,
+} from "@heroui/modal";
+import { Button } from "@heroui/button";
+import { Input } from "@heroui/input";
+import { Textarea } from "@heroui/input";
+import { Switch } from "@heroui/switch";
+import { Divider } from "@heroui/divider";
+import { addToast } from "@heroui/toast";
+import fetcher from "@/lib/fetcher";
+import { getQueryClient } from "@/lib/get-query-client";
+import { Asset } from "@/hooks/data/use-assets";
+
+interface AssetEditModalProps {
+ isOpen: boolean;
+ onOpenChange: (open: boolean) => void;
+ asset: Asset | null;
+}
+
+interface UpdateAssetData {
+ title?: string;
+ description?: string;
+ useMultiple: boolean;
+ consumed: boolean;
+}
+
+const AssetEditModal: React.FC = ({
+ isOpen,
+ onOpenChange,
+ asset,
+}) => {
+ const [formData, setFormData] = useState({
+ title: "",
+ description: "",
+ useMultiple: false,
+ consumed: false,
+ });
+ const [isLoading, setIsLoading] = useState(false);
+ const [isGeneratingAI, setIsGeneratingAI] = useState(false); // need in future
+ const qc = getQueryClient();
+
+ // Reset form when asset changes
+ useEffect(() => {
+ if (asset) {
+ setFormData({
+ title: asset.title || "",
+ description: asset.description || "",
+ useMultiple: asset.useMultiple,
+ consumed: asset.consumed,
+ });
+ }
+ }, [asset]);
+
+ const handleInputChange = (field: keyof UpdateAssetData, value: any) => {
+ setFormData((prev) => ({
+ ...prev,
+ [field]: value,
+ }));
+ };
+
+ const handleSave = async () => {
+ if (!asset) return;
+
+ setIsLoading(true);
+ try {
+ await fetcher(
+ "PATCH",
+ `/gallery/${asset.galleryId}/assets/${asset.id}`,
+ {
+ body: formData,
+ }
+ );
+
+ // Invalidate and refetch gallery assets
+ await qc.invalidateQueries({
+ queryKey: ["gallery-assets"],
+ });
+
+ addToast({
+ title: "Success",
+ description: "Asset updated successfully!",
+ color: "success",
+ });
+
+ onOpenChange(false);
+ } catch (error) {
+ console.error("Failed to update asset:", error);
+ addToast({
+ title: "Error",
+ description: "Failed to update asset. Please try again.",
+ color: "danger",
+ });
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleClose = () => {
+ if (!isLoading) {
+ onOpenChange(false);
+ }
+ };
+
+ if (!asset) return null;
+
+ return (
+
+
+ {(onClose) => (
+ <>
+
+
+
+
Gallery
-- Manage and view your media assets in one place +
+
);
diff --git a/src/components/gallery/AssetCard.tsx b/src/components/gallery/AssetCard.tsx
new file mode 100644
index 0000000..1669fea
--- /dev/null
+++ b/src/components/gallery/AssetCard.tsx
@@ -0,0 +1,324 @@
+"use client";
+
+import React, { useState } from "react";
+import { Tooltip } from "@heroui/tooltip";
+import { Chip } from "@heroui/chip";
+import { Button } from "@heroui/button";
+import { Image } from "@heroui/image";
+import {
+ Modal,
+ ModalContent,
+ ModalBody,
+ useDisclosure,
+ ModalFooter,
+} from "@heroui/modal";
+import { Card, CardBody, CardFooter } from "@heroui/card";
+import { Download, Trash2, Edit, Video, FileImage, Eraser } from "lucide-react";
+import fetcher from "@/lib/fetcher";
+
+import { Asset } from "@/hooks/data/use-assets";
+import { getQueryClient } from "@/lib/get-query-client";
+import { addToast } from "@heroui/toast";
+
+interface AssetCardProps {
+ asset: Asset;
+ onEdit?: (asset: Asset) => void;
+ className?: string;
+ showActions?: boolean;
+}
+
+const AssetCard: React.FC
+
- Gallery
++ Manage and view your media assets
-
+
+
+
+
+ {galleryLoading &&
- Gallery functionality is coming soon! In the meantime, you can use - unsplash. -
+
+
+
+
+ }
+ value={searchQuery}
+ onValueChange={setSearchQuery}
+ className="flex-1"
+ size="sm"
+ />
+
+
+
+
+ {(searchQuery || selectedType !== "all") && (
+
+ {searchQuery && (
+ setSearchQuery("")}
+ size="sm"
+ >
+ Search: {searchQuery}
+
+ )}
+ {selectedType !== "all" && (
+ setSelectedType("all")}
+ size="sm"
+ >
+ Type: {selectedType}
+
+ )}
+
+ )}
+
+ )}
+
+ {/* Results Info */}
+ {paginationData && (
+
+ {searchQuery || selectedType !== "all" ? (
+
+ )}
+
+ {/* Asset Edit Modal */}
+ Showing {filteredAssets.length} filtered results
+ ) : ( ++ Showing {(page - 1) * pageSize + 1}- + {Math.min(page * pageSize, paginationData.totalCount)} of{" "} + {paginationData.totalCount} assets +
+ )} +
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+ );
+ };
+
+ const renderFullView = () => {
+ if (asset.type === "IMAGE") {
+ return (
+
+
+
+ {renderAssetPreview()}
+
+
+
+ {asset.consumed && (
+
+ Used
+
+ )}
+ {asset.hidden && (
+
+ Hidden
+
+ )}
+
+
+
+
+ {showActions && (
+ + {asset.title || "Untitled Asset"} +
+ {asset.description && ( ++ {asset.description} +
+ )} +
+ {formatFileSize(asset.size)}
+ {formatDate(asset.createdAt)}
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {onEdit && (
+
+
+
+ )}
+
+
+
+
+
+ {renderFullView()}
+
+
+
+
+ + {asset.title || "Untitled Asset"} +
+ {asset.description && ( ++ {asset.description} +
+ )} +
+ Size: {formatFileSize(asset.size)}
+ Created: {formatDate(asset.createdAt)}
+ Type: {asset.type}
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {onEdit && (
+
+
+
+ )}
+
+
+ Edit Asset
++ Update asset details and settings +
+
+
+
+
+
+ {asset.type === "IMAGE" ? (
+ 
+ ) : (
+
+
+ 🎥
+
+ )}
+
+
+ + {asset.title || "Untitled"} +
++ {asset.type} • {Math.round(asset.size / 1024)} KB +
++ {new Date(asset.createdAt).toLocaleDateString()} +
+
+ handleInputChange("title", value)}
+ variant="bordered"
+ isDisabled={isLoading || isGeneratingAI}
+ />
+
+
+