sdf

components/Gallery.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import React, { useState } from "react";
+import { Gallery as ReactGridGallery, Image as ImageType, ThumbnailImageProps } from "react-grid-gallery";
+import Image from "next/image";
+const ImageComponent = (props: ThumbnailImageProps) => {
+  const { src, alt, style, title } = props.imageProps;
+  const { width, height } = props.item;
+
+  return (
+    <Image
+      alt={alt}
+      src={src}
+      title={title || ""}
+      width={width}
+      height={height}
+      onClick={() => {
+        window.open(src);
+      }}
+      style={style}
+    />
+  );
+};
+
+export default function Gallery({ images }: { images: ImageType[] }) {
+  return <ReactGridGallery images={images} enableImageSelection={false} thumbnailImageComponent={ImageComponent} />;
+}

components/ImageUpload.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+import React, { useState } from "react";
+import { useRef } from "react";
+export default function ImageUpload() {
+  const [selectedImage, setSelectedImage] = useState(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleImageChange = (event) => {
+    setSelectedImage(URL.createObjectURL(event.target.files[0]));
+  };
+
+  async function uploadImage() {
+    if (selectedImage) {
+      const formData = new FormData();
+      formData.append("image", selectedImage);
+      const response = await fetch("/api/images/", {
+        method: "POST",
+        body: formData,
+      });
+      console.log(await response.json());
+    }
+  }
+
+  return (
+    <div>
+      <input onChange={handleImageChange} ref={inputRef} type="file" name="image" accept="image/*" />
+      {selectedImage && <img src={selectedImage} alt="Selected" />}
+      <button onClick={uploadImage}>Upload</button>
+    </div>
+  );
+}