63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { ImagePreviewModal } from '@/components/dialogs';
|
|
import type { ImagePreviewItem } from '@/components/dialogs/image-preview-modal';
|
|
|
|
type ImagePreviewButtonProps = {
|
|
srcs: string[];
|
|
modalSrc?: string;
|
|
modalSrcs?: string[];
|
|
title?: string;
|
|
description?: string;
|
|
alt?: string;
|
|
className?: string;
|
|
items?: ImagePreviewItem[];
|
|
startIndex?: number;
|
|
};
|
|
|
|
export function ImagePreviewButton({
|
|
srcs,
|
|
modalSrc,
|
|
modalSrcs,
|
|
title,
|
|
description,
|
|
alt,
|
|
className = 'h-10 w-10',
|
|
items,
|
|
startIndex = 0,
|
|
}: ImagePreviewButtonProps) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const modalSources = modalSrcs ?? (modalSrc ? [modalSrc] : null);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(true)}
|
|
className={`relative block overflow-hidden rounded-md border bg-muted transition-opacity hover:opacity-80 ${className}`}
|
|
>
|
|
<img
|
|
src={srcs[0]}
|
|
alt={alt ?? title ?? 'Preview'}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
{srcs.length > 1 && (
|
|
<span className="absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
|
|
{srcs.length}
|
|
</span>
|
|
)}
|
|
</button>
|
|
<ImagePreviewModal
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
src={modalSources?.[0] ?? srcs[0]}
|
|
sources={modalSources ?? srcs}
|
|
title={title}
|
|
description={description}
|
|
items={items}
|
|
startIndex={startIndex}
|
|
/>
|
|
</>
|
|
);
|
|
}
|