26 lines
1.3 KiB
TypeScript
26 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
export function CommissionSlipDialog({ src }: { src: string }) {
|
|
const [imageState, setImageState] = useState<"loading" | "loaded" | "error">("loading");
|
|
|
|
return <Dialog>
|
|
<DialogTrigger render={<Button type="button" variant="outline" size="sm" className="w-fit" />}>
|
|
ดูสลิป
|
|
</DialogTrigger>
|
|
<DialogContent className="max-h-[90svh] max-w-[calc(100%-2rem)] sm:max-w-3xl">
|
|
<DialogTitle>สลิปการชำระเงิน</DialogTitle>
|
|
{imageState === "loading" && <Skeleton className="h-80 w-full" aria-label="กำลังโหลดสลิป" />}
|
|
{imageState === "error" && <p className="text-sm text-destructive">โหลดสลิปไม่สำเร็จ</p>}
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={src} alt="สลิปการชำระเงิน"
|
|
onLoad={() => setImageState("loaded")} onError={() => setImageState("error")}
|
|
className={imageState === "loaded" ? "max-h-[calc(90svh-7rem)] w-full object-contain" : "hidden"} />
|
|
</DialogContent>
|
|
</Dialog>;
|
|
}
|