68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { Camera, Image, X } from "lucide-react";
|
||
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "../ui/drawer";
|
||
|
||
interface ImageUploadDrawerProps {
|
||
isOpen: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
onCameraSelect: () => void;
|
||
onGallerySelect: () => void;
|
||
}
|
||
|
||
export const ImageUploadDrawer = ({
|
||
isOpen,
|
||
onOpenChange,
|
||
onCameraSelect,
|
||
onGallerySelect,
|
||
}: ImageUploadDrawerProps) => {
|
||
return (
|
||
<Drawer open={isOpen} onOpenChange={onOpenChange}>
|
||
<DrawerContent>
|
||
<DrawerHeader className="flex items-center justify-between">
|
||
<X
|
||
size={24}
|
||
className="text-BLACK2"
|
||
onClick={() => onOpenChange(false)}
|
||
/>
|
||
<DrawerTitle className="text-center text-B12 fonr-bold">
|
||
تصاویر محصول
|
||
</DrawerTitle>
|
||
<div />
|
||
</DrawerHeader>
|
||
|
||
<div className="flex gap-10 p-4 pb-6 items-center justify-center">
|
||
<div
|
||
className="flex flex-col items-center justify-center gap-1"
|
||
onClick={onCameraSelect}
|
||
onKeyDown={(e) =>
|
||
(e.key === "Enter" || e.key === " ") && onCameraSelect()
|
||
}
|
||
role="button"
|
||
tabIndex={0}
|
||
aria-label="Camera"
|
||
>
|
||
<div className="bg-BLACK h-12 w-12 shrink-0 flex flex-col items-center justify-center rounded-full">
|
||
<Camera size={24} className="text-WHITE" />
|
||
</div>
|
||
<p className="text-R12">دوربین</p>
|
||
</div>
|
||
<div
|
||
onClick={onGallerySelect}
|
||
onKeyDown={(e) =>
|
||
(e.key === "Enter" || e.key === " ") && onGallerySelect()
|
||
}
|
||
role="button"
|
||
tabIndex={0}
|
||
aria-label="Gallery"
|
||
className="flex flex-col items-center justify-center gap-1"
|
||
>
|
||
<div className="bg-BLACK h-12 w-12 shrink-0 flex flex-col items-center justify-center rounded-full">
|
||
<Image size={24} className="text-WHITE" />
|
||
</div>
|
||
<p className="text-R12">گالری</p>
|
||
</div>
|
||
</div>
|
||
</DrawerContent>
|
||
</Drawer>
|
||
);
|
||
};
|