diff --git a/data/index.js b/data/index.js new file mode 100644 index 0000000..1a0d8fd --- /dev/null +++ b/data/index.js @@ -0,0 +1,11 @@ +import { pluck, flatten, uniqWith, eqProps } from 'ramda'; +import projects from './repositories.json'; + +const getMentors = () => { + const mentors = flatten(pluck('mentors', projects.repositories)); + const uniqueMentors = uniqWith(eqProps('name'))(mentors); + + return uniqueMentors; +}; + +export default getMentors; diff --git a/data/repositories.json b/data/repositories.json index beeb334..30f2a4f 100644 --- a/data/repositories.json +++ b/data/repositories.json @@ -3,43 +3,111 @@ "repositories": [ { "name": "calluswhatyouwant/spotify-web-sdk", - "difficulty": "avancado" + "difficulty": "avancado", + "mentors": [ + { + "name": "JRobsonJr", + "imgUrl": "https://github.com/jrobsonjr.png" + }, + { + "name": "JoseRenan", + "imgUrl": "https://github.com/joserenan.png" + } + ] }, { "name": "calluswhatyouwant/musicritic", - "difficulty": "avancado" + "difficulty": "avancado", + "mentors": [ + { + "name": "JRobsonJr", + "imgUrl": "https://github.com/jrobsonjr.png" + }, + { + "name": "JoseRenan", + "imgUrl": "https://github.com/joserenan.png" + } + ] }, { "name": "paulojbleitao/pokedex", - "difficulty": "intermediario" + "difficulty": "intermediario", + "mentors": [ + { + "name": "PauloJBLeitao", + "imgUrl": "https://github.com/paulojbleitao.png" + } + ] }, { "name": "SubmiBot/SubmiBot", - "difficulty": "intermediario" + "difficulty": "intermediario", + "mentors": [ + { + "name": "HericlesMe", + "imgUrl": "https://github.com/hericlesme.png" + } + ] }, { "name": "marianabianca/pomodoro", - "difficulty": "iniciante" + "difficulty": "iniciante", + "mentors": [ + { + "name": "MarianaBianca", + "imgUrl": "https://github.com/marianabianca.png" + } + ] }, { "name": "P-Sync/P-Sync", - "difficulty": "intermediario" + "difficulty": "intermediario", + "mentors": [ + { + "name": "HericlesMe", + "imgUrl": "https://github.com/hericlesme.png" + } + ] }, { "name": "FelipeMarinho97/iskra-webkit-greeter", - "difficulty": "intermediario" + "difficulty": "intermediario", + "mentors": [ + { + "name": "FelipeMarinho97", + "imgUrl": "https://github.com/FelipeMarinho97.png" + } + ] }, { "name": "Rickecr/PyGraph", - "difficulty": "intermediario" + "difficulty": "intermediario", + "mentors": [ + { + "name": "Rickecr", + "imgUrl": "https://github.com/Rickecr.png" + } + ] }, { "name": "Rickecr/CamaraDosDeputados", - "difficulty": "iniciante" + "difficulty": "iniciante", + "mentors": [ + { + "name": "Rickecr", + "imgUrl": "https://github.com/Rickecr.png" + } + ] }, { "name": "matheusps/clssx", - "difficulty": "iniciante" + "difficulty": "iniciante", + "mentors": [ + { + "name": "Matheusps", + "imgUrl": "https://github.com/matheusps.png" + } + ] } ] } diff --git a/package.json b/package.json index 692f1c1..5e78363 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "mini-css-extract-plugin": "^0.4.4", "prettier": "^1.14.3", "pretty-quick": "^1.8.0", + "ramda": "^0.26.1", "react-dev-utils": "^6.1.1", "style-loader": "^0.23.1", "url-loader": "^2.2.0", diff --git a/src/components/app/App.js b/src/components/app/App.js index 2525728..8004dc7 100644 --- a/src/components/app/App.js +++ b/src/components/app/App.js @@ -19,6 +19,7 @@ const AppHeader = () => ( Quem Somos? Junte-se! + Mentores ); diff --git a/src/components/app/Routes.js b/src/components/app/Routes.js index 3d2c6cc..d8d3483 100644 --- a/src/components/app/Routes.js +++ b/src/components/app/Routes.js @@ -4,12 +4,14 @@ import { Switch, Route } from 'react-router-dom'; import ProjectsPage from '../projects/ProjectsPage'; import JoinUsPage from '../joinus/JoinUsPage'; import TeamPage from '../team/TeamPage'; +import MentorGrid from '../mentors/MentorGrid'; const Routes = () => ( + ); diff --git a/src/components/commons/header/Header.css b/src/components/commons/header/Header.css index 2605a84..3db5409 100644 --- a/src/components/commons/header/Header.css +++ b/src/components/commons/header/Header.css @@ -14,6 +14,7 @@ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; + z-index: 1; } /* Class used to keep the header at the top of the page even when it is rolled */ diff --git a/src/components/mentors/MentorCard.css b/src/components/mentors/Mentor.css similarity index 52% rename from src/components/mentors/MentorCard.css rename to src/components/mentors/Mentor.css index 2b665c3..c549199 100644 --- a/src/components/mentors/MentorCard.css +++ b/src/components/mentors/Mentor.css @@ -1,6 +1,46 @@ +.mentor-grid { + display: grid; + width: 100%; +} + +/* Extra small devices (phones, 600px and down) */ +@media only screen and (max-width: 600px) { + .mentor-grid { + grid-template-columns: 1fr; + } +} + +/* Small devices (portrait tablets and large phones, 600px and up) */ +@media only screen and (min-width: 600px) { + .mentor-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Medium devices (landscape tablets, 768px and up) */ +@media only screen and (min-width: 768px) { + .mentor-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Large devices (laptops/desktops, 992px and up) */ +@media only screen and (min-width: 992px) { + .mentor-grid { + grid-template-columns: repeat(4, 1fr); + } +} + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 1200px) { + .mentor-grid { + grid-template-columns: repeat(4, 1fr); + } +} + .img-mentor { border-radius: 100%; - width: 200px; + width: 100%; filter: grayscale(100%); transition: all 0.7s ease; } diff --git a/src/components/mentors/MentorCard.js b/src/components/mentors/MentorCard.js index ab8eafd..4ecd71f 100644 --- a/src/components/mentors/MentorCard.js +++ b/src/components/mentors/MentorCard.js @@ -1,24 +1,13 @@ // @flow import React from 'react'; -import type { Repository } from '../commons/repository/repository'; import type { Mentor as MentorCardProps } from './mentor'; -import './MentorCard.css'; +import './Mentor.css'; -const renderRepositories = (repositoriesList: Repository[]) => - repositoriesList.map(repository => ( -
  • - {repository.nameWithOwner} -
    • - )); - -const MentorCard = ({ name, imgUrl, repositoriesList }: MentorCardProps) => ( +const MentorCard = ({ name, imgUrl }: MentorCardProps) => (
    {name}
    {name}
    -
    ); diff --git a/src/components/mentors/MentorGrid.js b/src/components/mentors/MentorGrid.js index 2c7a5cb..8d847a6 100644 --- a/src/components/mentors/MentorGrid.js +++ b/src/components/mentors/MentorGrid.js @@ -3,22 +3,21 @@ import React from 'react'; import type { Mentor } from './mentor'; import MentorCard from './MentorCard'; +import getMentors from '../../../data'; +import './Mentor.css'; -type MentorGridProps = { - mentorsList: Mentor[], -}; - -const renderMentors = (mentorsList: Mentor[]) => - mentorsList.map(mentor => ( +const renderMentors = (mentorsList: Mentor[]) => { + return mentorsList.map((mentor, i) => ( )); +}; -const MentorGrid = ({ mentorsList }: MentorGridProps) => ( - +const MentorGrid = () => ( +
    {renderMentors(getMentors())}
    ); export default MentorGrid; diff --git a/src/components/mentors/mentor.js b/src/components/mentors/mentor.js index 77a6210..633292a 100644 --- a/src/components/mentors/mentor.js +++ b/src/components/mentors/mentor.js @@ -1,8 +1,6 @@ // @flow -import type { Repository } from '../commons/repository/repository'; export type Mentor = { name: string, imgUrl: string, - repositoriesList: Repository[], }; diff --git a/yarn.lock b/yarn.lock index 65fc30d..0f15591 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4650,7 +4650,7 @@ querystringify@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e" -ramda@^0.26: +ramda@^0.26, ramda@^0.26.1: version "0.26.1" resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06" integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==