move to x icon for dismiss

This commit is contained in:
arkml 2025-09-19 18:36:55 +05:30
parent 08c0232184
commit 9123b35a85

View file

@ -133,7 +133,7 @@ export function ComposeBoxPlayground({
{/* Textarea */}
<div className="flex-1">
{pendingImage && (
<div className="mb-2 flex items-center gap-2">
<div className="mb-2 inline-block relative">
<img
src={pendingImage.previewSrc || pendingImage.url}
alt="Uploaded image preview"
@ -141,7 +141,8 @@ export function ComposeBoxPlayground({
/>
<button
type="button"
className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-700"
aria-label="Remove image"
className="absolute -top-1 -right-1 p-1 rounded-full bg-white dark:bg-zinc-900 border border-gray-200 dark:border-gray-700 shadow hover:bg-gray-50 dark:hover:bg-zinc-800"
onClick={() => {
if (pendingImage?.previewSrc) {
try { URL.revokeObjectURL(pendingImage.previewSrc); } catch {}
@ -149,7 +150,7 @@ export function ComposeBoxPlayground({
setPendingImage(null);
}}
>
Dismiss
<XIcon size={12} />
</button>
</div>
)}
@ -276,3 +277,22 @@ function ImageIcon({ size, className }: { size: number, className?: string }) {
</svg>
);
}
function XIcon({ size, className }: { size: number, className?: string }) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={className}
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
);
}