create ImageCollector play (#649)

* create ImageCollector play

* fix image aspect ratio

* add cover image

* fixes

* remove comments

Co-authored-by: Koustov <[email protected]>
Co-authored-by: Murtuzaali Surti <[email protected]>
Co-authored-by: Tapas Adhikary <[email protected]>

src/plays/image-collector/ImageCollector.js

@@ -0,0 +1,53 @@
+import PlayHeader from "common/playlists/PlayHeader";
+import { useState } from "react";
+import "./styles.css";
+
+function ImageCollector(props) {
+ const [urlInput, setUrlInput] = useState("");
+ const [images, setImages] = useState([]);
+
+ function addImage() {
+ setImages(images.concat(urlInput));
+ setUrlInput("");
+ }
+
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ <div className="image-collector-container">
+ <div className="input-container">
+ <input
+ className="input-url"
+ type="url"
+ placeholder="Enter image url"
+ value={urlInput}
+ onChange={(e) => setUrlInput(e.target.value)}
+ />
+ <button className="input-button" type="submit" onClick={addImage}>
+ Add
+ </button>
+ </div>
+
+ <div className="image-grid">
+ {images.length > 0 ? (
+ images.map((image, index) => (
+ <div className="image-wrapper">
+ <img className="image" src={image} alt="grid" key={index} />
+ </div>
+ ))
+ ) : (
+ <p className="empty-message">
+ Images will appear once you add them
+ </p>
+ )}
+ </div>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default ImageCollector;

src/plays/image-collector/readme.md

@@ -0,0 +1,19 @@
+# Image Collector
+
+Users can collect images in a grid by submitting image URLs
+
+## Play Demographic
+
+- Language: js
+- Level: Beginner
+
+## Creator Information
+
+- User: AhnafAhamed
+- Gihub Link: https://github.com/AhnafAhamed
+- Blog: null
+- Video: null
+
+## Implementation Details
+
+This implementations adds images to your collection based on the url the user submits.

src/plays/image-collector/styles.css

@@ -0,0 +1,52 @@
+.input-container {
+ width: max-content;
+ margin: auto;
+}
+
+.input-url {
+ padding: 8px 16px;
+ width: 400px;
+ margin-bottom: 32px;
+}
+
+.input-button {
+ padding: 8px 16px;
+ background-color: aqua;
+ text-transform: uppercase;
+ font-weight: 500;
+}
+
+.image-grid {
+ max-width: 800px;
+ margin: auto;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ grid-gap: 12px;
+}
+.image-wrapper {
+ width: 200px;
+ height: 300px;
+ flex-grow: 1;
+ border: 1px solid #010326;
+}
+.image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.empty-message {
+ width: max-content;
+ margin: auto;
+ font-size: 24px;
+}
+
+@media (max-width: 400px) {
+ .input-url {
+ width: 240px;
+ }
+
+ .image-grid {
+ justify-content: center;
+ }
+}