mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 00:40:14 +01:00
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
|
import * as Dialog from '@radix-ui/react-dialog';
|
||
|
|
|
||
|
|
export default function DialogImage({ src = '', width = 1920, height = 1080 }) {
|
||
|
|
return (
|
||
|
|
<Dialog.Portal>
|
||
|
|
<Dialog.Overlay
|
||
|
|
className="radix-state-open:animate-show fixed inset-0 z-[100] flex items-center justify-center overflow-hidden bg-black/90 dark:bg-black/80"
|
||
|
|
style={{ pointerEvents: 'auto' }}
|
||
|
|
>
|
||
|
|
<Dialog.Close asChild>
|
||
|
|
<button
|
||
|
|
className="absolute right-4 top-4 text-gray-50 transition hover:text-gray-200"
|
||
|
|
type="button"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
stroke="currentColor"
|
||
|
|
fill="none"
|
||
|
|
strokeWidth="2"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
className="h-5 w-5"
|
||
|
|
height="1em"
|
||
|
|
width="1em"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
||
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</Dialog.Close>
|
||
|
|
<Dialog.Content
|
||
|
|
className="radix-state-open:animate-contentShow relative max-h-[85vh] max-w-[90vw] shadow-xl focus:outline-none"
|
||
|
|
tabIndex={-1}
|
||
|
|
style={{ pointerEvents: 'auto', aspectRatio: height > width ? 1 / 1.75 : 1.75 / 1 }}
|
||
|
|
>
|
||
|
|
<img src={src} alt="Uploaded image" className="h-full w-full object-contain" />
|
||
|
|
</Dialog.Content>
|
||
|
|
</Dialog.Overlay>
|
||
|
|
</Dialog.Portal>
|
||
|
|
);
|
||
|
|
}
|