Added image gallery

react/src/helpers/challenges.ts

@@ -20,6 +20,17 @@ export const challenges = new Map([
       tags: [],
     },
   ],
+  [
+    'image-gallery',
+    {
+      title: 'Image Gallery',
+      link: 'image-gallery',
+      difficulty: 'easy',
+      developer: 'Bhushan1019',
+      isNew: true,
+      tags: [],
+    },
+  ],
   [
     'accordion',
     {

react/src/helpers/contributors.ts

@@ -20,4 +20,5 @@ export const contributors = new Map([
   ['ashikjhonson', { name: 'Ashik Jhonson', pic: 'https://avatars.githubusercontent.com/u/97791612' }],
   ['Krishnakalani111', { name: 'Krishna Kalani', pic: 'https://avatars.githubusercontent.com/u/88764668' }],
   ['viditagrawal56', { name: 'Vidit Agrawal', pic: 'https://avatars.githubusercontent.com/u/52532308' }],
+  ['Bhushan1019', { name: 'Bhushan Patil', pic: 'https://avatars.githubusercontent.com/u/121352274' }],
 ]);

react/src/machine-coding/image-gallery/App.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import styles from './style.module.css';
+
+const ImageGallery: React.FC = () => {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
+  const images: string[] = [
+    'https://imgs.search.brave.com/bAdI7a7qnuuOIJphttt3DfbzLnCU7ZDMtnkejXq6UII/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9zdDIu/ZGVwb3NpdHBob3Rv/cy5jb20vMTAwMDkz/OC81NDk5L2kvNDUw/L2RlcG9zaXRwaG90/b3NfNTQ5OTg2MTMt/c3RvY2stcGhvdG8t/Z2luZ2VyLWNhdC5q/cGc',
+    'https://imgs.search.brave.com/YzG9FgYN5qLWsiYyJ4dUEvxav9e98dBH0loR8YPRA1E/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5pc3RvY2twaG90/by5jb20vaWQvMTc0/ODc3NTY1L3Bob3Rv/L3BvcnRyYWl0LW9m/LWEtYnJvd24tY2F0/LWFnYWluc3QtYS1n/cmF5LWJhY2tncm91/bmQuanBnP3M9NjEy/eDYxMiZ3PTAmaz0y/MCZjPWlGcFFNSzlF/aTIzVm9XcExLa2Zh/TFVtdXN5Y3VaWllV/OWtWMjNzT2F6YzQ9',
+    'https://imgs.search.brave.com/lZtf1S7JKFcaZs2lhxTpAtaJzTk_V35Xt8ys4htuVBU/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9idXJz/dC5zaG9waWZ5Y2Ru/LmNvbS9waG90b3Mv/Y2F0LXBvc2VzLXBl/cmZlY3RseS5qcGc_/d2lkdGg9MTAwMCZm/b3JtYXQ9cGpwZyZl/eGlmPTAmaXB0Yz0w',
+    'https://imgs.search.brave.com/t6Nv0DwxoIACRxxtX2h7yt31ux5SCXHWgHVpoGh1diw/rs:fit:500:0:0/g:ce/aHR0cHM6Ly90My5m/dGNkbi5uZXQvanBn/LzAyLzM2Lzk5LzIy/LzM2MF9GXzIzNjk5/MjI4M19zTk94Q1ZR/ZUZMZDVwZHFhS0do/OERSR01aeTdQNFhL/bS5qcGc',
+  ];
+
+  const handleClick = (image: string) => {
+    setSelectedImage(image);
+  };
+
+  return (
+    <div className={styles['image-gallery-container']}>
+      <h1 className={styles['gallery-heading']}>Image Gallery 🐱</h1>
+      <p className={styles['gallery-para']}>Click on an image!</p>
+      <div className={styles['image-container']}>
+        {images.map((image, index) => (
+          <div key={index} className={styles['image-wrapper']} onClick={() => handleClick(image)}>
+            <img src={image} alt={`Image ${index + 1}`} className={styles['gallery-image']} />
+          </div>
+        ))}
+      </div>
+      {selectedImage && (
+        <div className={styles['selected-image']}>
+          <h2 className={styles['selected-heading']}>Selected Image</h2>
+          <img src={selectedImage} alt="Selected" className={styles['selected-img']} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ImageGallery;

react/src/machine-coding/image-gallery/style.module.css

@@ -0,0 +1,55 @@
+/* Styles for the Image Gallery */
+.image-gallery-container {
+  text-align: center;
+  margin: 20px;
+}
+
+.gallery-heading {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.gallery-para {
+  text-decoration: underline;
+}
+
+.image-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+.image-wrapper {
+  cursor: pointer;
+  transition: transform 0.2s ease-in-out;
+}
+
+.image-wrapper:hover {
+  transform: scale(1.1);
+}
+
+.gallery-image {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 10px;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+}
+
+/* Styles for the Selected Image */
+.selected-image {
+  margin-top: 40px;
+  text-align: center;
+}
+
+.selected-heading {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.selected-img {
+  max-width: 100%;
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+}

react/src/pages/Challenge.tsx

@@ -29,6 +29,7 @@ import TicTacToe from '@/machine-coding/tic-tac-toe/App';
 import Toast from '@/machine-coding/toast-popup/toast';
 import TodoList from '@/machine-coding/todo-list/todo';
 import TwentyfiveFiveClock from '@/machine-coding/25-5-clock';
+import ImageGallery from '@/machine-coding/image-gallery/App.tsx';
 import { challenges } from '@/helpers/challenges';
 import { useParams } from 'react-router-dom';
 
@@ -63,6 +64,7 @@ const reactChallenges = {
   pagination: <Pagination />,
   'qr-code-generator': <QRCodeGenerator />,
   'quote-generator': <QouteGenerator />,
+  'image-gallery': <ImageGallery />,
 };
 
 function Challenge() {