Merge pull request #1 from alura-challenges/aula01

Todos os arquivos da Aula 01

package.json

@@ -1,6 +1,6 @@
 {
- "name": "with-styled-components",
- "version": "1.0.0",
+ "name": "aluraquiz-base",
+ "version": "1.0.1",
  "scripts": {
  "dev": "next",
  "build": "next build",

pages/_app.js

@@ -1,24 +1,37 @@
 import { createGlobalStyle, ThemeProvider } from 'styled-components'
+import db from '../db.json';
 
 const GlobalStyle = createGlobalStyle`
+ * {
+ box-sizing: border-box;
+ }
  body {
  margin: 0;
  padding: 0;
- box-sizing: border-box;
+ /* New styles */
+ display: flex;
+ flex-direction: column;
+ font-family: 'Lato', sans-serif;
+ // Deixa branco no começo
+ color: ${({ theme }) => theme.colors.contrastText};
+ }
+ html, body {
+ min-height: 100vh;
+ }
+ #__next {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
  }
 `
 
-const theme = {
- colors: {
- primary: '#0070f3',
- },
-}
+const theme = db.theme;
 
 export default function App({ Component, pageProps }) {
  return (
  <>
- <GlobalStyle />
  <ThemeProvider theme={theme}>
+ <GlobalStyle />
  <Component {...pageProps} />
  </ThemeProvider>
  </>

pages/index.js

@@ -1,10 +1,53 @@
 import styled from 'styled-components'
+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 Title = styled.h1`
- font-size: 50px;
- color: ${({ theme }) => theme.colors.primary};
-`
+// 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;
+ }
+`;
 
 export default function Home() {
- return <Title>My page</Title>
+ return (
+ <QuizBackground backgroundImage={db.bg}>
+ <QuizContainer>
+ <QuizLogo />
+ <Widget>
+ <Widget.Header>
+ <h1>{db.title}</h1>
+ </Widget.Header>
+ <Widget.Content>
+ <p>{db.description}</p>
+ </Widget.Content>
+ </Widget>
+
+ <Widget>
+ <Widget.Content>
+ <h1>Quizes da Galera</h1>
+
+ <p>lorem ipsum dolor sit amet...</p>
+ </Widget.Content>
+ </Widget>
+ <Footer />
+ </QuizContainer>
+ <GitHubCorner projectUrl="https://github.com/omariosouto" />
+ </QuizBackground>
+ );
 }

src/components/Footer/index.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components'
+
+// src/components/Footer/index.js
+const FooterWrapper = styled.footer`
+ background-color: #00000070;
+ padding: 20px;
+ display: flex;
+ align-items: center;
+ border-radius: 4px; 
+ img {
+ width: 58px;
+ margin-right: 23px;
+ }
+ a {
+ color: white;
+ text-decoration: none;
+ transition: .3s;
+ &:hover,
+ &:focus {
+ opacity: .5;
+ }
+ span {
+ text-decoration: underline;
+ }
+ }
+`;
+
+export default function Footer(props) {
+ return (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ <FooterWrapper {...props}>
+ <a href="https://www.alura.com.br/">
+ <img src="https://www.alura.com.br/assets/img/alura-logo-white.1570550707.svg" alt="Logo Alura" />
+ </a>
+ <p>
+ Orgulhosamente criado durante
+ {' '}
+ a
+ {' '}
+ <a href="https://www.alura.com.br/">
+ <span>Imersão React da Alura</span>
+ </a>
+ </p>
+ </FooterWrapper>
+ );
+}

src/components/GitHubCorner/index.js

@@ -0,0 +1,48 @@
+// src/components/GitHubCorner/index.js
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ position: absolute;
+ top: 0;
+ border: 0;
+ right: 0;
+ z-index: 20;
+`;
+
+const SVGWrapper = styled.svg`
+ fill: ${({ theme }) => theme.colors.secondary};
+ color: ${({ theme }) => theme.colors.contrastText};
+ cursor: pointer;
+ &:hover .octo-arm{
+ animation:octocat-wave 560ms ease-in-out
+ }
+ @keyframes octocat-wave{
+ 0%,100%{transform:rotate(0)}
+ 20%,60%{transform:rotate(-25deg)}
+ 40%,80%{transform:rotate(10deg)}
+ }
+ @media (max-width:500px){
+ &:hover .octo-arm{
+ animation:none
+ }
+ & .octo-arm{
+ animation:octocat-wave 560ms ease-in-out
+ }
+ }
+`;
+
+// eslint-disable-next-line react/prop-types
+export default function GitHubCorner({ projectUrl }) {
+ return (
+ <Wrapper>
+ <a href={projectUrl} target="_blank" rel="noreferrer">
+ <SVGWrapper className="githubCorner" width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
+ <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+ <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style={{ transformOrigin: '130px 106px' }} className="octo-arm" />
+ <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" className="octo-body" />
+ </SVGWrapper>
+ </a>
+ </Wrapper>
+ );
+}

src/components/QuizBackground/index.js

@@ -0,0 +1,36 @@
+// src/components/QuizBackground/index.js
+import styled from 'styled-components';
+
+const QuizBackground = styled.div`
+ width: 100%;
+ background-size: cover;
+ background-position: center;
+ background-image: url(${({ backgroundImage }) => backgroundImage});
+ background-color: ${({ theme }) => theme.colors.mainBg};
+ flex: 1;
+ @media screen and (max-width: 500px) {
+ background-image: none;
+ &:after {
+ content: "";
+ background-size: cover;
+ background-position: center;
+ background-image:
+ linear-gradient(transparent, ${({ theme }) => theme.colors.mainBg}),
+ url(${({ backgroundImage }) => backgroundImage});
+ display: block;
+ width: 100%;
+ height: 210px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1;
+ }
+ *:first-child {
+ position: relative;
+ z-index: 10;
+ }
+ }
+`;
+
+export default QuizBackground;

src/components/Widget/index.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components'
+
+const Widget = styled.div`
+ margin-top: 24px;
+ margin-bottom: 24px;
+ border: 1px solid ${({ theme }) => theme.colors.primary};
+ background-color: ${({ theme }) => {
+ return theme.colors.mainBg;
+ }};
+ border-radius: 4px;
+ overflow: hidden;
+
+ h1, h2, h3 {
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 1;
+ margin-bottom: 0;
+ }
+ p {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1;
+ }
+`;
+
+Widget.Header = styled.header`
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 18px 32px;
+ background-color: ${({ theme }) => theme.colors.primary};
+ 
+ * {
+ margin: 0;
+ }
+`;
+
+Widget.Content = styled.div`
+ padding: 24px 32px 32px 32px;
+ & > *:first-child {
+ margin-top: 0;
+ }
+ & > *:last-child {
+ margin-bottom: 0;
+ }
+ ul {
+ list-style: none;
+ padding: 0;
+ }
+`;
+
+export default Widget;