From 6ed23a246fab5e4ca1b0181c3406daaea9627bed Mon Sep 17 00:00:00 2001 From: Sadanand Pai Date: Thu, 13 Jul 2023 21:41:38 +0530 Subject: [PATCH] React: Developer details addition --- native/helpers/contributors.js | 4 - native/index.js | 5 +- native/style.css | 2 +- .../components/challenges/ChallengeGrid.tsx | 26 +++-- .../challenges/challenge-grid.module.scss | 89 ++++++++++----- react/src/helpers/challenges.ts | 104 ++++++++++++++---- react/src/helpers/contributors.ts | 9 ++ 7 files changed, 174 insertions(+), 65 deletions(-) create mode 100644 react/src/helpers/contributors.ts diff --git a/native/helpers/contributors.js b/native/helpers/contributors.js index 2248bbfe7..740e47d20 100644 --- 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 index b6342ef05..9fae29d6d 100644 --- 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 index 520c879c1..3d0f85742 100644 --- 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 index 78bbb38a6..8d9f24478 100644 --- 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 (
{challenges.map((challenge) => ( -
- - {challenge.title} - + {challenge.isNew && New} -
+
+

{challenge.title}

+ + {challenge.developer && ( +
+ + {contributors.get(challenge.developer)?.name} +
+ )} +
+ ))}
); diff --git a/react/src/components/challenges/challenge-grid.module.scss b/react/src/components/challenges/challenge-grid.module.scss index ad9a126ad..5cf7c2b88 100644 --- 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 index b1c08e43f..1da34a776 100644 --- 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 new file mode 100644 index 000000000..48d22697b --- /dev/null +++ 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' }], +]);