From 3c7b3d7824dfaf3bae53d36a5d1c941ce69f8d93 Mon Sep 17 00:00:00 2001 From: josuezx98 Date: Fri, 2 Oct 2020 12:09:27 -0300 Subject: [PATCH 1/6] detail roadmap --- api/roadmaps/index.ts | 4 +- components/CardTech.tsx | 108 +++++++++++++++++++ components/button/Button.tsx | 41 ++++++++ pages/index.tsx | 102 ++++++++++-------- pages/roadmaps/[name].tsx | 198 ++++++++++++++++++++++++++++------- public/arrow.svg | 38 +++++++ public/line.svg | 34 ++++++ public/wave_abajo_rotar.svg | 1 + public/waves.svg | 1 + theme/index.tsx | 2 + 10 files changed, 443 insertions(+), 86 deletions(-) create mode 100644 components/CardTech.tsx create mode 100644 components/button/Button.tsx create mode 100644 public/arrow.svg create mode 100644 public/line.svg create mode 100644 public/wave_abajo_rotar.svg create mode 100644 public/waves.svg diff --git a/api/roadmaps/index.ts b/api/roadmaps/index.ts index 9063793..f9031a0 100644 --- a/api/roadmaps/index.ts +++ b/api/roadmaps/index.ts @@ -5,12 +5,12 @@ export * from './types'; export const getRoadmaps = () => { return fetch( - `${process.env.NEXT_PUBLIC_BASE_URL}/roadmaps` + `${process.env.NEXT_PUBLIC_BASE_URL}roadmaps` ); }; export const getRoadmap = (name: string) => { return fetch( - `${process.env.NEXT_PUBLIC_BASE_URL}/roadmaps/${name}` + `${process.env.NEXT_PUBLIC_BASE_URL}roadmaps/${name}` ); }; diff --git a/components/CardTech.tsx b/components/CardTech.tsx new file mode 100644 index 0000000..7be9488 --- /dev/null +++ b/components/CardTech.tsx @@ -0,0 +1,108 @@ +import React, { useState } from 'react'; +import styled from '@emotion/styled'; +import { GetStaticPaths, GetStaticProps } from 'next'; +import { Layout, Card, Text } from '../components'; +import { + AvatarGroup, + Avatar, + Collapse, + Link, + Flex, + Image, + useColorMode, + Heading, +} from '@chakra-ui/core'; + +const CardTech = ({ image, title, description }) => { + const [show, setShow] = React.useState(false); + const handleToggle = () => setShow(!show); + + const { colorMode } = useColorMode(); + const avatars = [ + { name: 'logo', image: '../branding/logo_compact.svg' }, + { name: 'logo', image: '../branding/logo_compact.svg' }, + ]; + return ( + + + + + + + + {title} + + + {description} + + + + + {avatars.map((avatar) => ( + + ))} + + + + + + Aprender + + + + arrow + + + + + + ); +}; +export default CardTech; diff --git a/components/button/Button.tsx b/components/button/Button.tsx new file mode 100644 index 0000000..69d89b4 --- /dev/null +++ b/components/button/Button.tsx @@ -0,0 +1,41 @@ +const Button = { + // The styles all button have in common + baseStyle: { + fontWeight: 'bold', + textTransform: 'uppercase', + }, + // Two sizes: sm and md + + sizes: { + sm: { + fontSize: '12px', + padding: '16px', + }, + md: { + fontSize: '16px', + padding: '24px', + }, + }, + // Two variants: outline and solid + variants: { + outline: { + border: '2px solid', + borderColor: 'blue.500', + }, + solid: { + bg: 'black', + color: 'white', + }, + coderhood: { + bg: '#f26840', + color: 'white', + }, + }, + // The default size and variant values + defaultProps: { + size: 'md', + variant: 'outline', + }, +}; + +export default Button; diff --git a/pages/index.tsx b/pages/index.tsx index 5772e5b..9fd4cd8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,15 +1,19 @@ import React from 'react'; import styled from '@emotion/styled'; +import { GetStaticProps } from 'next'; +import NextLink from 'next/link'; import { + Link, Flex, Image, SimpleGrid, Button, - Link, useColorMode, + Heading, + Center, } from '@chakra-ui/core'; -import { GetRoadmapsResponse } from '../api/roadmaps'; -import { Text } from '../components'; +import { getRoadmaps, GetRoadmapsResponse } from '../api/roadmaps'; +import { Layout, Card, Text, TextureGrid, Dash } from '../components'; import CardHowDoesItWork from '../components/CardHowDoesItWork'; import DiscordConnect from '../components/DiscordConnect'; @@ -26,6 +30,7 @@ const CardRoadmap = styled.div` border-color: #f26840; border-width: 0.08rem; border-radius: 0.2rem; + cursor: pointer; `; const Home: React.FC = ({ roadmaps }) => { @@ -88,8 +93,8 @@ const Home: React.FC = ({ roadmaps }) => { En coderhood impulzamos el aprendizaje autodidacta y colaborativo. @@ -159,48 +164,48 @@ const Home: React.FC = ({ roadmaps }) => { columns={[1, 2, 2, 2, 2]} spacing={['0.5rem', '2rem', '3rem', '4rem', '5rem']} > - - - - Frontend - - ( + - Guia paso a paso para convertirte en un desarrollador - frontend moderno. - - - - - - - Backend - - - Guia paso a paso para convertirte en un desarrollador - backend moderno. - - - + + + {roadmap.title} + + + {roadmap.description} + + + + ))} @@ -211,4 +216,11 @@ const Home: React.FC = ({ roadmaps }) => { ); }; +export const getStaticProps: GetStaticProps = async () => { + const roadmaps = await getRoadmaps(); + return { + props: { roadmaps }, + }; +}; + export default Home; diff --git a/pages/roadmaps/[name].tsx b/pages/roadmaps/[name].tsx index bb51f20..8c63506 100644 --- a/pages/roadmaps/[name].tsx +++ b/pages/roadmaps/[name].tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import styled from '@emotion/styled'; import { GetStaticPaths, GetStaticProps } from 'next'; import { getRoadmaps, @@ -7,57 +8,176 @@ import { Subject, } from '../../api/roadmaps'; import { Layout, Card, Text } from '../../components'; - -import { Box, Avatar, Collapse, Flex } from '@chakra-ui/core'; - +import CardTech from '../../components/CardTech'; +import { + Link, + Flex, + Image, + Button, + useColorMode, + Center, +} from '@chakra-ui/core'; interface Props { roadmap: GetRoadmapResponse; } const Roadmap: React.FC = ({ roadmap }) => { const [expanded, setExpanded] = useState(false); - - const handleExpandClick = () => { - setExpanded(!expanded); - }; + const [show, setShow] = React.useState(false); + const { colorMode, toggleColorMode } = useColorMode(); return ( - - - {roadmap.title} - - {roadmap.description} - + <> + +
+ + Tu camino como{' '} + {roadmap.title} empiezá + acá. + +
+
+ + arrow down + + wave up +
+ +
+ + {roadmap.description} + +
+
+ + wave down + + {roadmap.subjects.map((subject: Subject) => ( - - - - {subject.title} - - - {subject.description} - - - - Method: - - Heat 1/2 cup of the broth in a pot until simmering, add - saffron and set aside for 10 minutes. - - - Set aside off of the heat to let rest for 10 minutes, and then - serve. - - - - + ))} - - +
+
+
+ + Estas trabado con algo o necesitas ayuda? + + + Sacate las dudas que tengas en nuestra comunidad en discord + + + + +
+
+ ); }; export const getStaticPaths: GetStaticPaths = async () => { - const roadmaps = []; // await getRoadmaps(); + const roadmaps = await getRoadmaps(); // Get the paths we want to pre-render based on roadmaps const paths = roadmaps.map((roadmap) => `/roadmaps/${roadmap.name}`); @@ -68,7 +188,7 @@ export const getStaticPaths: GetStaticPaths = async () => { }; export const getStaticProps: GetStaticProps = async ({ params }: any) => { - const roadmap = {}; // await getRoadmap(params.name); + const roadmap = await getRoadmap(params.name); return { props: { roadmap }, }; diff --git a/public/arrow.svg b/public/arrow.svg new file mode 100644 index 0000000..e622e54 --- /dev/null +++ b/public/arrow.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/line.svg b/public/line.svg new file mode 100644 index 0000000..dbeea22 --- /dev/null +++ b/public/line.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/wave_abajo_rotar.svg b/public/wave_abajo_rotar.svg new file mode 100644 index 0000000..137a138 --- /dev/null +++ b/public/wave_abajo_rotar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/waves.svg b/public/waves.svg new file mode 100644 index 0000000..e32bd9b --- /dev/null +++ b/public/waves.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/theme/index.tsx b/theme/index.tsx index 528db97..88e09c1 100644 --- a/theme/index.tsx +++ b/theme/index.tsx @@ -1,6 +1,7 @@ import defaultTheme, { Theme } from '@chakra-ui/theme'; // import { stylesConfig } from '../coderhood-ui/button/styles'; import { Colors } from './colors'; +import Button from '../components/button/Button'; const breakpoints = ['48rem', '62rem', '80rem', '100rem', '120rem']; @@ -39,6 +40,7 @@ export const coderhoodTheme = { components: { ...defaultTheme.components, // Button: stylesConfig, + //Button, Heading: { ...defaultTheme.components.Heading, baseStyle: { From 73b03963d7902ce48733b659a7a6c6e144074af2 Mon Sep 17 00:00:00 2001 From: josuezx98 Date: Mon, 5 Oct 2020 16:33:27 -0300 Subject: [PATCH 2/6] keys --- pages/index.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 9fd4cd8..3375ac8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -113,8 +113,9 @@ const Home: React.FC = ({ roadmaps }) => { - {HowDoesItWork.map((how) => ( + {HowDoesItWork.map((how, index) => ( = ({ roadmaps }) => { spacing={['0.5rem', '2rem', '3rem', '4rem', '5rem']} > {roadmaps && - roadmaps.map((roadmap) => ( + roadmaps.map((roadmap, index) => ( Date: Mon, 5 Oct 2020 17:09:03 -0300 Subject: [PATCH 3/6] key avatar group --- components/CardTech.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/CardTech.tsx b/components/CardTech.tsx index 7be9488..622b772 100644 --- a/components/CardTech.tsx +++ b/components/CardTech.tsx @@ -66,8 +66,9 @@ const CardTech = ({ image, title, description }) => { - {avatars.map((avatar) => ( + {avatars.map((avatar, index) => ( Date: Mon, 5 Oct 2020 20:35:47 -0300 Subject: [PATCH 4/6] fix endpoint --- api/roadmaps/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/api/roadmaps/index.ts b/api/roadmaps/index.ts index f9031a0..9063793 100644 --- a/api/roadmaps/index.ts +++ b/api/roadmaps/index.ts @@ -5,12 +5,12 @@ export * from './types'; export const getRoadmaps = () => { return fetch( - `${process.env.NEXT_PUBLIC_BASE_URL}roadmaps` + `${process.env.NEXT_PUBLIC_BASE_URL}/roadmaps` ); }; export const getRoadmap = (name: string) => { return fetch( - `${process.env.NEXT_PUBLIC_BASE_URL}roadmaps/${name}` + `${process.env.NEXT_PUBLIC_BASE_URL}/roadmaps/${name}` ); }; From 9d280342b797ba40a83c7b2b9b6662e87bb5b25f Mon Sep 17 00:00:00 2001 From: josuezx98 Date: Wed, 7 Oct 2020 13:02:52 -0300 Subject: [PATCH 5/6] interface add --- components/CardTech.tsx | 15 +++++++++------ components/button/Button.tsx | 8 ++++---- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/components/CardTech.tsx b/components/CardTech.tsx index 622b772..40004fd 100644 --- a/components/CardTech.tsx +++ b/components/CardTech.tsx @@ -1,7 +1,4 @@ import React, { useState } from 'react'; -import styled from '@emotion/styled'; -import { GetStaticPaths, GetStaticProps } from 'next'; -import { Layout, Card, Text } from '../components'; import { AvatarGroup, Avatar, @@ -10,11 +7,17 @@ import { Flex, Image, useColorMode, - Heading, } from '@chakra-ui/core'; +import { Text } from '../components'; -const CardTech = ({ image, title, description }) => { - const [show, setShow] = React.useState(false); +interface Props { + image: string; + title: string; + description: string; +} + +const CardTech: React.FC = ({ image, title, description }) => { + const [show, setShow] = useState(false); const handleToggle = () => setShow(!show); const { colorMode } = useColorMode(); diff --git a/components/button/Button.tsx b/components/button/Button.tsx index 69d89b4..feb4e95 100644 --- a/components/button/Button.tsx +++ b/components/button/Button.tsx @@ -1,10 +1,10 @@ const Button = { - // The styles all button have in common + baseStyle: { fontWeight: 'bold', textTransform: 'uppercase', }, - // Two sizes: sm and md + sizes: { sm: { @@ -16,7 +16,7 @@ const Button = { padding: '24px', }, }, - // Two variants: outline and solid + variants: { outline: { border: '2px solid', @@ -31,7 +31,7 @@ const Button = { color: 'white', }, }, - // The default size and variant values + defaultProps: { size: 'md', variant: 'outline', From 83837fcd3a8c2f1aae14b4113c27b6771c60f807 Mon Sep 17 00:00:00 2001 From: josuezx98 Date: Wed, 7 Oct 2020 15:15:58 -0300 Subject: [PATCH 6/6] changed fonts --- components/CardTech.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/CardTech.tsx b/components/CardTech.tsx index 40004fd..c13fa56 100644 --- a/components/CardTech.tsx +++ b/components/CardTech.tsx @@ -51,7 +51,8 @@ const CardTech: React.FC = ({ image, title, description }) => { {title}