light-box

1"use client"
2import type { ComponentProps } from "react"
3import { LightBox as LightBoxPrimitive } from "@zenithui/light-box"
4import { cn } from "@/lib/utils"
5import { ChevronLeft, ChevronRight, Trash2, X } from "lucide-react"
6 
7export default function LightBox({
8  classNames,
9  ...props
10}: ComponentProps<typeof LightBoxPrimitive>) {
11  return (
12    <LightBoxPrimitive
13      classNames={{
14        overLay: cn(
15          "data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 bg-black/10",
16          classNames?.overLay,
17        ),
18        lightBox: cn(
19          "data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in bg-background fixed top-[50%] left-[50%] z-50 grid w-11/12 max-w-xl translate-x-[-50%] translate-y-[-50%] gap-4 border shadow-lg duration-200 sm:rounded-lg lg:w-full",
20          "flex aspect-square min-w-[35%] flex-col justify-between overflow-hidden border-0 p-6 shadow-[inset_0_0_20px_5px_rgb(0,0,0,0.25)]",
21          "data-[animation=slide]:p-0",
22          classNames?.lightBox,
23        ),
24        controls: cn(
25          "z-10 flex w-full flex-row items-center justify-end gap-4 space-y-0",
26          "data-[animation=slide]:p-4",
27          classNames?.controls,
28        ),
29        navigation: cn(
30          "z-10 flex w-full items-center justify-between",
31          "data-[animation=slide]:p-4",
32          classNames?.navigation,
33        ),
34        footer: cn(
35          "z-10 flex w-full flex-col justify-end sm:flex-col",
36          "data-[animation=slide]:p-4",
37          classNames?.footer,
38        ),
39        caption: cn("text-2xl font-semibold text-white", classNames?.caption),
40        captionDescription: cn(
41          "text-base font-normal text-white",
42          classNames?.captionDescription,
43        ),
44        pagination: cn(
45          "flex w-full items-center justify-center gap-2",
46          classNames?.pagination,
47        ),
48        closeButton: cn(
49          "flex size-10 cursor-pointer items-center justify-center rounded-full bg-white/30 text-white backdrop:blur-sm hover:bg-white/40",
50          classNames?.closeButton,
51        ),
52        deleteButton: cn(
53          "flex size-10 cursor-pointer items-center justify-center rounded-full bg-white/30 text-white backdrop:blur-sm hover:bg-white/40",
54          classNames?.deleteButton,
55        ),
56        navigateButton: cn(
57// … truncated