feat: add save/copy buttons to image preview modal
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useUIStore } from '../../stores/uiStore';
|
import { useUIStore } from '../../stores/uiStore';
|
||||||
|
import { saveImage, copyImageToClipboard } from '../../utils/imageActions';
|
||||||
|
|
||||||
export function ImagePreview() {
|
export function ImagePreview() {
|
||||||
const imageUrl = useUIStore((s) => s.imagePreviewUrl);
|
const imageUrl = useUIStore((s) => s.imagePreviewUrl);
|
||||||
@@ -13,14 +14,42 @@ export function ImagePreview() {
|
|||||||
className="fixed inset-0 z-[200] flex items-center justify-center bg-surface-overlay animate-fade-in cursor-pointer"
|
className="fixed inset-0 z-[200] flex items-center justify-center bg-surface-overlay animate-fade-in cursor-pointer"
|
||||||
onClick={closeImagePreview}
|
onClick={closeImagePreview}
|
||||||
>
|
>
|
||||||
|
{/* Toolbar: download, copy, close */}
|
||||||
|
<div className="absolute top-4 right-4 flex items-center gap-2 z-10">
|
||||||
<button
|
<button
|
||||||
className="absolute top-4 right-4 text-white/70 hover:text-white transition-colors z-10"
|
className="text-white/70 hover:text-white transition-colors"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
saveImage(imageUrl);
|
||||||
|
}}
|
||||||
|
title="Save image"
|
||||||
|
>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="text-white/70 hover:text-white transition-colors"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
copyImageToClipboard(imageUrl);
|
||||||
|
}}
|
||||||
|
title="Copy image"
|
||||||
|
>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M21 9v10c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h7l6 6zm-2 1h-5V4H8v15h11V10zM3 15V3c0-1.1.9-2 2-2h9v2H5v12H3z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="text-white/70 hover:text-white transition-colors"
|
||||||
onClick={closeImagePreview}
|
onClick={closeImagePreview}
|
||||||
|
title="Close"
|
||||||
>
|
>
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||||
<path d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z" />
|
<path d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
<img
|
<img
|
||||||
src={imageUrl}
|
src={imageUrl}
|
||||||
alt="Preview"
|
alt="Preview"
|
||||||
|
|||||||
Reference in New Issue
Block a user