humam kerdiah
4bfd8c84a9
- Implemented TemplateCheckpointEditDialog for creating and editing inspection checkpoints. - Added VendorActions component for managing vendor actions including edit, activate/deactivate, and delete. - Created VendorContext for managing vendor state across components. - Developed VendorGeneralInfo component to display detailed vendor information. - Introduced AedSymbol and Money components for consistent currency representation. - Added PromptDialog for user input prompts throughout the application. - Implemented RelationLink component for unified related-data display in CRUD tables. - Created InspectionTemplatesClient for API interactions related to inspection templates.
60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { Dialog, DialogContent } from "@/shared/components/ui/dialog"
|
|
|
|
export type LightboxItem = {
|
|
id: number
|
|
url: string | null
|
|
media_type: "photo" | "video" | "audio" | "document"
|
|
caption?: string | null
|
|
}
|
|
|
|
export function CheckpointMediaLightbox({
|
|
open,
|
|
onOpenChange,
|
|
item,
|
|
}: {
|
|
open: boolean
|
|
onOpenChange: (o: boolean) => void
|
|
item: LightboxItem | null
|
|
}) {
|
|
if (!item) return null
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-3xl p-0 bg-black/95 border-0">
|
|
<div className="flex items-center justify-center min-h-[60vh] max-h-[85vh] p-4">
|
|
{item.media_type === "photo" && item.url && (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={item.url}
|
|
alt={item.caption ?? ""}
|
|
className="max-w-full max-h-[80vh] object-contain"
|
|
/>
|
|
)}
|
|
{item.media_type === "video" && item.url && (
|
|
<video src={item.url} controls autoPlay className="max-w-full max-h-[80vh]" />
|
|
)}
|
|
{item.media_type === "audio" && item.url && (
|
|
<audio src={item.url} controls className="w-full" />
|
|
)}
|
|
{item.media_type === "document" && item.url && (
|
|
<a
|
|
href={item.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-white underline"
|
|
>
|
|
Open document
|
|
</a>
|
|
)}
|
|
</div>
|
|
{item.caption && (
|
|
<div className="bg-black/80 text-white text-sm px-4 py-2 text-center">
|
|
{item.caption}
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|