Galeria de Projetos
+Galeria de Projetos
Estamos muito felizes de contar com a sua participação, confira todos os outros projetos criados durante essa imersão!
@@ -67,7 +65,8 @@ export default function ContributorsPage({ contributors }) {
- @{user} + @ + {user}
@@ -85,7 +84,6 @@ export default function ContributorsPage({ contributors }) { ); } - export async function getStaticProps() { const contributors = fs.readdirSync('./contributors').map((fileName) => { const [user, projectUrl] = fs @@ -94,13 +92,13 @@ export async function getStaticProps() { return { user, - projectUrl - } - }) + projectUrl, + }; + }); return { props: { contributors, - } - } + }, + }; } diff --git a/pages/index.js b/pages/index.js index 1b413040..c812f942 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,30 +1,28 @@ -import styled from 'styled-components' +/* eslint-disable react/prop-types */ +import React, { useState } from 'react'; +import { useRouter } from 'next/router'; +// database import db from '../db.json'; -import Widget from '../src/components/Widget' -import QuizLogo from '../src/components/QuizLogo' -import QuizBackground from '../src/components/QuizBackground' -import Footer from '../src/components/Footer' -import GitHubCorner from '../src/components/GitHubCorner' - -// const BackgroundImage = styled.div` -// background-image: url(${db.bg}); -// flex: 1; -// background-size: cover; -// background-position: center; -// `; - -export const QuizContainer = styled.div` - width: 100%; - max-width: 350px; - padding-top: 45px; - margin: auto 10%; - @media screen and (max-width: 500px) { - margin: auto; - padding: 15px; - } -`; +// styled components +import Input from '../src/components/Input'; +import Widget from '../src/components/Widget'; +import Footer from '../src/components/Footer'; +import Button from '../src/components/Button'; +import QuizLogo from '../src/components/QuizLogo'; +import GitHubCorner from '../src/components/GitHubCorner'; +import QuizContainer from '../src/components/QuizContainer'; +import QuizBackground from '../src/components/QuizBackground'; export default function Home() { + const [name, setName] = useState(''); + console.log('name: ', name, 'setName:', setName); + + const router = useRouter(); + + const handleSubmit = () => { + router.push(`/quiz?name=${name}`); + }; + return ({db.description}
+ +Quizes da Galera
+Quizes da Galera:
+lorem ipsum dolor sit amet...
+-
+ {db.external.map((linkExterno) => {
+ const [projectName, githubUser] = linkExterno
+ .replace('https:', '')
+ .replace(/\//g, '')
+ .replace('.vercel.app', '')
+ .split('.');
+ return (
+
-
+
+ {`${projectName}/${githubUser}`} + +
+ );
+ })}
+
+ // {JSON.stringify(dbExterno.questions, null, 4)}
+ // */}
+
+ );
+}
+
+export async function getServerSideProps(context) {
+ // console.log('Infos que o Next nos dá:', context.query);
+ const [projectName, githubUser] = context.query.id.split('___');
+ const dbExterno = await fetch(`https://${projectName}.${githubUser}.vercel.app/api/db`)
+ .then((response) => {
+ if (response) {
+ return response.json();
+ }
+ throw new Error('Fetching data error');
+ })
+ .then((resToObject) => resToObject)
+ .catch((err) => {
+ console.error(err);
+ });
+
+ return {
+ props: {
+ dbExterno,
+ }, // will be passed to the page component as props
+ };
+}
diff --git a/pages/quiz/index.js b/pages/quiz/index.js
new file mode 100644
index 00000000..026d1fef
--- /dev/null
+++ b/pages/quiz/index.js
@@ -0,0 +1,254 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect } from 'react';
+// database
+import db from '../../db.json';
+// styled components
+import Footer from '../../src/components/Footer';
+import Widget from '../../src/components/Widget';
+import Button from '../../src/components/Button';
+import Loader from '../../src/components/Loader';
+import QuizLogo from '../../src/components/QuizLogo';
+import GitHubCorner from '../../src/components/GitHubCorner';
+import QuizContainer from '../../src/components/QuizContainer';
+import QuizBackground from '../../src/components/QuizBackground';
+import AlternativForm from '../../src/components/AlternativForm';
+import BackLinkArrow from '../../src/components/BackLinkArrow';
+
+const ResultWidget = ({ results }) => (
+
+ 
+ )}
+ {(results.filter((x) => x).length) > (results.filter((x) => x).length / 2)
+ && (
+ 
+ )}
+ + Você acertou + {' '} + {results.filter((x) => x).length} + {' '} + perguntas de + {' '} + {results.length} + . +
++ No total de + {' '} + {results.reduce((actualSum, actualResult) => { + const isCorrect = actualResult === true; + if (isCorrect) { + return actualSum + 50; + } + return actualSum; + }, 0)} + {' '} + pontos. +
++ {' '} + {`Enigma ${questionIndex + 1} de ${totalQuestions}`} +
++ {question.title} +
+ ++ {question.description} +
+ +
+ {JSON.stringify(question, null, 4)}
+ */}
+
+
+
+
+);
+
+Input.propTypes = {
+ onChange: PropTypes.func.isRequired,
+ placeholder: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+};
+
+export default Input;
diff --git a/src/components/Link/index.js b/src/components/Link/index.js
new file mode 100644
index 00000000..7b9a2ac7
--- /dev/null
+++ b/src/components/Link/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import NextLink from 'next/link';
+
+export default function Link({ children, href, ...props }) {
+ return (
+
+ )}
+ {results.filter((x) => x).length > results.filter((x) => x).length / 2
+ && (
+
+ )}
+ + Você acertou + {' '} + {results.filter((x) => x).length} + {' '} + perguntas de + {' '} + {results.length} + . +
++ No total de + {' '} + {results.reduce((actualSum, actualResult) => { + const isCorrect = actualResult === true; + if (isCorrect) { + return actualSum + 50; + } + return actualSum; + }, 0)} + {' '} + pontos. +
++ {' '} + {`Enigma ${questionIndex + 1} de ${totalQuestions}`} +
++ {question.title} +
+ ++ {question.description} +
+ +
+ {JSON.stringify(question, null, 4)}
+ */}
+
+
+