fix(components): add unoptimized image prop, overflow containment, and accessibility
Add unoptimized prop to image preview to support blob URLs, contain overflow on preview container, replace div with semantic section element in DragDropContainer with aria-label, and import shared image constants.
This commit is contained in:
@@ -1,9 +1,9 @@
|
|||||||
import Image from "next/image";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import { Card } from "@/components/ui/card";
|
|
||||||
import { ImagePicker } from "@/components/image-picker";
|
|
||||||
import { X } from "lucide-react";
|
import { X } from "lucide-react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { ImagePicker } from "@/components/image-picker";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
|
||||||
interface AIToolbarProps {
|
interface AIToolbarProps {
|
||||||
isAuthenticated: boolean;
|
isAuthenticated: boolean;
|
||||||
@@ -53,13 +53,14 @@ export const AIToolbar = ({
|
|||||||
onChange={(e) => setAiPrompt(e.target.value)}
|
onChange={(e) => setAiPrompt(e.target.value)}
|
||||||
/>
|
/>
|
||||||
{imagePreview && (
|
{imagePreview && (
|
||||||
<div className="relative mt-2 inline-block">
|
<div className="relative mt-2 inline-block max-w-full overflow-hidden">
|
||||||
<Image
|
<Image
|
||||||
src={imagePreview}
|
src={imagePreview}
|
||||||
alt="Attached event flyer"
|
alt="Attached event flyer"
|
||||||
className="h-20 rounded-md object-cover border"
|
className="h-20 rounded-md object-cover border"
|
||||||
width={80}
|
width={80}
|
||||||
height={80}
|
height={80}
|
||||||
|
unoptimized
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
variant="destructive"
|
variant="destructive"
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { ReactNode } from "react";
|
import type { ReactNode } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
import { IMAGE_EXTENSIONS } from "@/lib/constants";
|
||||||
const IMAGE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".webp"];
|
|
||||||
|
|
||||||
const getFileType = (file: File): "ics" | "image" | null => {
|
const getFileType = (file: File): "ics" | "image" | null => {
|
||||||
const name = file.name.toLowerCase();
|
const name = file.name.toLowerCase();
|
||||||
@@ -53,7 +52,8 @@ export const DragDropContainer = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<section
|
||||||
|
aria-label="Drag and drop file import area"
|
||||||
onDragOver={handleDragOver}
|
onDragOver={handleDragOver}
|
||||||
onDragLeave={handleDragLeave}
|
onDragLeave={handleDragLeave}
|
||||||
onDrop={handleDrop}
|
onDrop={handleDrop}
|
||||||
@@ -67,6 +67,6 @@ export const DragDropContainer = ({
|
|||||||
Drag & Drop *.ics or an event screenshot here
|
Drag & Drop *.ics or an event screenshot here
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user