feat: open images

src/context/DialogContext.tsx

@@ -23,7 +23,7 @@ export const DialogProvider = ({ children }: Props) => {
 			<Dialog open={open} onOpenChange={(value) => setOpen(value)}>
 				{LazyDialogContent && (
 					<Suspense fallback={<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">Loading dialog...</div>}>
-						<LazyDialogContent />
+						<LazyDialogContent close={() => setOpen(false)} />
 					</Suspense>
 				)}
 			</Dialog>

src/context/ImageContext.tsx

@@ -0,0 +1,19 @@
+import { createContext, ReactNode, useState } from "react";
+
+interface Props {
+	children: ReactNode;
+}
+
+export const ImageContext = createContext({
+	image: new Image() as HTMLImageElement | undefined,
+	imageDimensions: { width: 0, height: 0 } as Dimension,
+	setImage: (image: HTMLImageElement) => {},
+	setImageDimensions: (dimension: Dimension) => {},
+});
+
+export const ImageProvider = ({ children }: Props) => {
+	const [image, setImage] = useState<HTMLImageElement>();
+	const [imageDimensions, setImageDimensions] = useState<Dimension>({ width: 0, height: 0 });
+
+	return <ImageContext.Provider value={{ image, imageDimensions, setImage, setImageDimensions }}>{children}</ImageContext.Provider>;
+};