React: Developer details addition

sadanandpai · Jul 13, 2023 · 6ed23a2 · 6ed23a2
1 parent 9e5177b
commit 6ed23a2
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 65 deletions.
diff --git a/native/helpers/contributors.js b/native/helpers/contributors.js
@@ -1,8 +1,4 @@
 export const contributors = new Map([
   ['sadanandpai', { name: 'Sadanand Pai', pic: 'https://avatars.githubusercontent.com/u/12962887' }],
-  ['NikhilJHA01', { name: 'Nikhil Jha', pic: 'https://avatars.githubusercontent.com/u/63518046' }],
   ['noorulaink00', { name: 'Noor Ul Ain Khan', pic: 'https://avatars.githubusercontent.com/u/65324193' }],
-  ['deepu0', { name: 'Deepak Kumar', pic: 'https://avatars.githubusercontent.com/u/22304384' }],
-  ['deepakRikhav', { name: 'Deepak Rikhav', pic: 'https://avatars.githubusercontent.com/u/97227284' }],
-  ['arpansaha13', { name: 'Arpan Saha', pic: 'https://avatars.githubusercontent.com/u/82361490' }],
 ]);
diff --git a/native/index.js b/native/index.js
@@ -24,12 +24,13 @@ const createAnchorElement = (challenge) => {
   if (challenge.developer) {
     const developer = challengeCard.querySelector('.developer');
     developer.classList.remove('hidden');
+
+    const contributor = contributors.get(challenge.developer);
     const developerName = challengeCard.querySelector('.developer-name');
-    developerName.textContent = challenge.developer;
     const developerImg = challengeCard.querySelector('.developer-img');
-    const contributor = contributors.get(challenge.developer);
     developerImg.src = contributor.pic;
     developerImg.alt = contributor.name;
+    developerName.textContent = contributor.name;
   }
 
   return challengeCard;

diff --git a/native/style.css b/native/style.css
@@ -35,7 +35,7 @@ a img {
 }
 
 .challenge-card.disabled {
-  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.1);
 }
 
 .challenge-card.disabled:hover {

diff --git a/react/src/components/challenges/ChallengeGrid.tsx b/react/src/components/challenges/ChallengeGrid.tsx
@@ -1,20 +1,28 @@
 import { challenges } from '@/helpers/challenges';
+import { contributors } from '@/helpers/contributors';
 import styles from './challenge-grid.module.scss';
 
 function ChallengeGrid() {
   return (
     <div className={styles.challengeGrid}>
       {challenges.map((challenge) => (
-        <div key={challenge.title}>
-          <a
-            href={challenge.link}
-            className={`${challenge.link === '#' ? 'disabled' : ''}`}
-            title={challenge.link === '#' ? 'To be developed' : ''}
-          >
-            {challenge.title}
-          </a>
+        <a
+          key={challenge.title}
+          className={`${styles.challengeCard} ${challenge.link === '#' && styles.disabled}`}
+          href={challenge.link}
+        >
           {challenge.isNew && <span className={styles.new}>New</span>}
-        </div>
+          <div>
+            <h3>{challenge.title}</h3>
+
+            {challenge.developer && (
+              <div className={styles.developer}>
+                <img src={contributors.get(challenge.developer)?.pic} alt="" />
+                <span className={styles.name}>{contributors.get(challenge.developer)?.name}</span>
+              </div>
+            )}
+          </div>
+        </a>
       ))}
     </div>
   );

diff --git a/react/src/components/challenges/challenge-grid.module.scss b/react/src/components/challenges/challenge-grid.module.scss
@@ -1,37 +1,45 @@
 .challengeGrid {
+  display: grid;
   grid-gap: 1.5rem;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(1, 1fr);
   margin: 2rem 0;
-  display: grid;
+}
 
-  div {
-    position: relative;
-    overflow: hidden;
-    background-color: white;
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.15);
-    transition: all 0.2s ease-in-out;
-  }
+.challengeCard {
+  padding: 10px;
+  position: relative;
+  overflow: hidden;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.15);
+  transition: all 0.2s ease-in-out;
 
-  div:hover {
+  &:hover {
     box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.3);
     transform: scale(1.05);
   }
 
-  a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100px;
-    padding: 10px;
+  h3 {
     color: chocolate;
     font-size: 1.25rem;
-    text-decoration: none;
+  }
+
+  &.disabled h3 {
+    color: grey;
+  }
+
+  &.disabled {
+    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.1);
+    cursor: not-allowed;
+  }
 
-    &[class="disabled"] {
-      color: grey;
-      cursor: not-allowed;
-    }
+  &.disabled:hover {
+    transform: scale(1);
+  }
+
+  a {
+    color: chocolate;
+    text-decoration: none;
   }
 
   .new {
@@ -46,15 +54,40 @@
     transform: rotate(45deg);
   }
 
-  @media screen and (min-width: 768px) {
-    grid-template-columns: repeat(3, 1fr);
+  .developer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: black;
+    font-size: 0.8rem;
   }
 
-  @media screen and (min-width: 1024px) {
-    grid-template-columns: repeat(4, 1fr);
+  img {
+    border-radius: 50%;
+    height: 25px;
+    width: 25px;
+    margin-right: 0.5rem;
+  }
+
+  .name {
+    color: black;
   }
+}
 
-  @media screen and (min-width: 1400px) {
-    grid-template-columns: repeat(5, 1fr);
+@media screen and (min-width: 480px) {
+  .challengeGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .challengeGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  .challengeGrid {
+    grid-template-columns: repeat(4, 1fr);
   }
 }
diff --git a/react/src/helpers/challenges.ts b/react/src/helpers/challenges.ts
@@ -1,31 +1,93 @@
 export const challenges = [
-  { title: "Counter", link: "#/0/counter" },
-  { title: "Accordion", link: "#/1/accordion" },
-  { title: "Star Rating", link: "#/2/star-Rating" },
-  { title: "Light Dark Mode", link: "#/3/light-dark-mode" },
-  { title: "Guess the number", link: "#/4/Guess-the-number" },
-  {
-    title: "Telephone formatter",
-    link: "#/5/telephone-formatter",
+  {
+    title: 'Counter',
+    link: '#/0/counter',
+    difficulty: 'easy',
+    developer: 'sadanandpai',
+    tags: [],
+  },
+  {
+    title: 'Accordion',
+    link: '#/1/accordion',
+    developer: 'NikhilJHA01',
+    difficulty: 'easy',
+    tags: [],
+  },
+  {
+    title: 'Star Rating',
+    link: '#/2/star-Rating',
+    difficulty: 'easy',
+    developer: 'NikhilJHA01',
+    tags: [],
+  },
+  {
+    title: 'Light Dark Mode',
+    link: '#/3/light-dark-mode',
+    difficulty: 'easy',
+    developer: 'NikhilJHA01',
+    tags: [],
+  },
+  {
+    title: 'Guess the number',
+    link: '#/4/Guess-the-number',
+    difficulty: 'easy',
+    developer: 'deepakrajkranti',
+    tags: [],
+  },
+  {
+    title: 'Telephone formatter',
+    link: '#/5/telephone-formatter',
+    difficulty: 'easy',
+    developer: 'arpansaha13',
+    tags: [],
+    isNew: true,
+  },
+  {
+    title: 'Toast Popup',
+    link: '#/6/toast-popup',
+    difficulty: 'easy',
+    developer: 'deepu0',
+    tags: [],
+    isNew: true,
+  },
+  {
+    title: 'Password Strength',
+    link: '#/7/password-strength',
+    difficulty: 'easy',
+    developer: 'deepu0',
+    tags: [],
+    isNew: true,
+  },
+  {
+    title: 'Todo List',
+    link: '#/8/todo-list',
+    difficulty: 'medium',
+    developer: 'deepakrajkranti',
+    tags: [],
+    isNew: true,
+  },
+  {
+    title: 'File Explorer',
+    link: '#/9/file-explorer',
+    difficulty: 'easy',
+    developer: 'sadanandpai',
+    tags: [],
     isNew: true,
   },
-  { title: "Toast Popup", link: "#/6/toast-popup", isNew: true },
-  { title: "Password Strength", link: "#/7/password-strength", isNew: true },
-  { title: "Todo List", link: "#/8/todo-list", isNew: true },
-  { title: "File Explorer", link: "#/9/file-explorer", isNew: true },
   {
-    title: "Typeahead / Autocomplete (offline)",
-    link: "#/10/autocomplete-offline",
+    title: 'Typeahead / Autocomplete (offline)',
+    link: '#/10/autocomplete-offline',
+    difficulty: 'hard',
+    developer: 'deepu0',
+    tags: [],
     isNew: true,
   },
   {
-    title: "Typeahead / Autocomplete (online)",
-    link: "#/11/autocomplete-online",
+    title: 'Typeahead / Autocomplete (online)',
+    link: '#/11/autocomplete-online',
+    difficulty: 'hard',
+    developer: 'deepu0',
+    tags: [],
     isNew: true,
   },
-  { title: "Pixel Art", link: "#" },
-  { title: "Color Spotter", link: "#" },
-  { title: "Tic-Tac-Toe", link: "#" },
-  { title: "Chess board", link: "#" },
-  { title: "Chess board", link: "#" },
 ];
diff --git a/react/src/helpers/contributors.ts b/react/src/helpers/contributors.ts
@@ -0,0 +1,9 @@
+export const contributors = new Map([
+  ['sadanandpai', { name: 'Sadanand Pai', pic: 'https://avatars.githubusercontent.com/u/12962887' }],
+  ['NikhilJHA01', { name: 'Nikhil Jha', pic: 'https://avatars.githubusercontent.com/u/63518046' }],
+  ['noorulaink00', { name: 'Noor Ul Ain Khan', pic: 'https://avatars.githubusercontent.com/u/65324193' }],
+  ['deepu0', { name: 'Deepak Kumar', pic: 'https://avatars.githubusercontent.com/u/22304384' }],
+  ['deepakRikhav', { name: 'Deepak Rikhav', pic: 'https://avatars.githubusercontent.com/u/97227284' }],
+  ['arpansaha13', { name: 'Arpan Saha', pic: 'https://avatars.githubusercontent.com/u/82361490' }],
+  ['deepakrajkranti', { name: 'Deepak Raj', pic: 'https://avatars.githubusercontent.com/u/88797436' }],
+]);