feat: "Feature Request: Bulk Image Upload Capability in Media Popup"

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "WillLuke.nextjs.hasPrompted": true
+}

apps/frontend/src/components/MediaPopup.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+
+interface MediaPopupProps {
+  images: string[]; // List of image URLs or file references
+  onAddImages: (selectedImages: string[]) => void; // Callback for selected images
+}
+
+const MediaPopup: React.FC<MediaPopupProps> = ({ images, onAddImages }) => {
+  const [selectedImages, setSelectedImages] = useState<string[]>([]);
+
+  // Toggle the selection of an image
+  const toggleImageSelection = (image: string) => {
+    if (selectedImages.includes(image)) {
+      setSelectedImages(selectedImages.filter((img) => img !== image)); // Remove if already selected
+    } else {
+      setSelectedImages([...selectedImages, image]); // Add to selected images
+    }
+  };
+
+  // Handle the add button click
+  const handleAddClick = () => {
+    onAddImages(selectedImages); // Pass selected images back to the parent
+    setSelectedImages([]); // Clear selection after adding
+  };
+
+  return (
+    <div className="media-popup">
+      <h3>Select Images</h3>
+      <div className="image-grid">
+        {images.map((image) => (
+          <div
+            key={image}
+            className={`image-item ${
+              selectedImages.includes(image) ? 'selected' : ''
+            }`}
+            onClick={() => toggleImageSelection(image)}
+          >
+            <img src={image} alt="media" />
+          </div>
+        ))}
+      </div>
+      <button onClick={handleAddClick} disabled={selectedImages.length === 0}>
+        Add {selectedImages.length > 0 ? `(${selectedImages.length})` : ''}{' '}
+        Images
+      </button>
+
+      <style jsx>{`
+        .media-popup {
+          padding: 20px;
+        }
+        .image-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+          gap: 10px;
+        }
+        .image-item {
+          cursor: pointer;
+          border: 2px solid transparent;
+          transition: border-color 0.3s ease;
+        }
+        .image-item img {
+          max-width: 100px;
+          height: auto;
+        }
+        .image-item.selected {
+          border-color: blue; /* Border for selected images */
+        }
+        button {
+          margin-top: 20px;
+          padding: 10px;
+          background-color: #007bff;
+          color: white;
+          border: none;
+          cursor: pointer;
+          border-radius: 5px;
+        }
+        button:disabled {
+          background-color: grey;
+          cursor: not-allowed;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default MediaPopup;

apps/frontend/src/components/PostCreator.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import MediaPopup from './MediaPopup'; // Import the MediaPopup component
+
+const PostCreator: React.FC = () => {
+  const [showMediaPopup, setShowMediaPopup] = useState(false);
+  const [selectedImages, setSelectedImages] = useState<string[]>([]);
+
+  const imageGallery = [
+    'image1.jpg',
+    'image2.jpg',
+    'image3.jpg',
+    'image4.jpg',
+    // Add more image URLs or file paths here
+  ];
+
+  // Callback to handle the images selected from the media popup
+  const handleAddImages = (images: string[]) => {
+    setSelectedImages((prevImages) => [...prevImages, ...images]); // Add the selected images to the existing list
+    setShowMediaPopup(false); // Close the popup after adding
+  };
+
+  return (
+    <div>
+      <h1>Create a Post</h1>
+      <button onClick={() => setShowMediaPopup(true)}>Add Images</button>
+
+      {/* Display selected images */}
+      <div className="selected-images">
+        {selectedImages.map((image) => (
+          <img
+            key={image}
+            src={image}
+            alt="Selected"
+            className="selected-image"
+          />
+        ))}
+      </div>
+
+      {/* Media popup */}
+      {showMediaPopup && (
+        <MediaPopup images={imageGallery} onAddImages={handleAddImages} />
+      )}
+
+      <style jsx>{`
+        .selected-images {
+          margin-top: 20px;
+          display: flex;
+          gap: 10px;
+        }
+        .selected-image {
+          max-width: 100px;
+          height: auto;
+          border: 2px solid #ddd;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default PostCreator;