Skip to content

Commit

Permalink
(#5) Corrigindo erros do prettier no projeto
Browse files Browse the repository at this point in the history 
Co-authored-by: Emily Sousa <diassousa@yahoo.com.br>
  • Loading branch information
@sergiosacj @emysdias
sergiosacj and emysdias committed Sep 17, 2021
1 parent 9f55284 commit 7cb2fba
Show file tree
Hide file tree
Showing 6 changed files with 178 additions and 165 deletions.
48 changes: 23 additions & 25 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,30 @@
import React from "react";
import React from 'react';

import GlobalStyle from "styles/global";
import GlobalStyle from 'styles/global';

import NavBar from "components/NavBar";
import Loading from "components/Loading";
import MenuItem from "components/MenuItem";
import NavBar from 'components/NavBar';
import Loading from 'components/Loading';
import MenuItem from 'components/MenuItem';

const App: React.FC = () => {
return (
<>
<NavBar />
<MenuItem
id={0}
image={
"https://blog.finamac.com/wp-content/uploads/2019/10/309956-como-oferecer-os-melhores-sabores-de-milkshake-para-os-clientes-1280x640.jpg"
}
name={"Milkshake"}
price={"16.90"}
discount={0}
description={
"Disponível nos sabores morango, chocolate, oreo e creme de\
avelã."
}
/>
<Loading />
<GlobalStyle />
</>
);
return (
<>
<NavBar />
<MenuItem
id={0}
image="https://blog.finamac.com/wp-content/uploads/2019/10/309956-como-oferecer-os-melhores-sabores-de-milkshake-para-os-clientes-1280x640.jpg"
name="Milkshake"
price="16.90"
discount={0}
description={
'Disponível nos sabores morango, chocolate, oreo e creme de\
avelã.'
}
/>
<Loading />
<GlobalStyle />
</>
);
};

export default App;
14 changes: 7 additions & 7 deletions frontend/src/components/Loading/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from "react";
import React from 'react';

import { LoadingContainer } from "components/Loading/styles";
import { LoadingContainer } from 'components/Loading/styles';

const Loading: React.FC = () => {
return (
<LoadingContainer>
<div />
</LoadingContainer>
);
return (
<LoadingContainer>
<div />
</LoadingContainer>
);
};

export default Loading;
84 changes: 42 additions & 42 deletions frontend/src/components/Loading/styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
import styled from "styled-components";
import styled from 'styled-components';

export const LoadingContainer = styled.div`
div,
div:before,
div:after {
background: transparent;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
div,
div:before,
div:after {
background: transparent;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
div {
color: black;
text-indent: -9999em;
margin: 88px auto;
margin-top: 20rem;
position: relative;
font-size: 3rem;
transform: translateZ(0);
animation-delay: -0.16s;
}
div:before,
div:after {
position: absolute;
top: 0;
content: '';
}
div:before {
left: -1.5em;
animation-delay: -0.32s;
}
div:after {
left: 1.5em;
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
div {
color: black;
text-indent: -9999em;
margin: 88px auto;
margin-top: 20rem;
position: relative;
font-size: 3rem;
transform: translateZ(0);
animation-delay: -0.16s;
}
div:before,
div:after {
position: absolute;
top: 0;
content: "";
}
div:before {
left: -1.5em;
animation-delay: -0.32s;
}
div:after {
left: 1.5em;
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
`;
66 changes: 36 additions & 30 deletions frontend/src/components/MenuItem/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,42 @@
import React from "react";
import React from 'react';

import { MenuItemContainer } from "components/MenuItem/styles";
import { MenuItemContainer } from 'components/MenuItem/styles';

interface IMenuItem {
id: number;
image: string;
name: string;
price: string;
discount: number;
description: string;
}
type Props = {
id: number;
image: string;
name: string;
price: string;
discount: number;
description: string;
};

const MenuItem: React.FC<IMenuItem> = ({
id,
image,
name,
price,
discount,
description,
}: IMenuItem) => {
//const addItem = ({ addItem } = useContext(ItemContext));
return (
<MenuItemContainer>
<img src={image} alt={name} />
<div>
<h4>{name}</h4>
<p>{description}</p>
<h5>R${price}</h5>
<button onClick={() => {}}>Adicionar</button>
</div>
</MenuItemContainer>
);
const MenuItem: React.FC<Props> = ({
id,
image,
name,
price,
discount,
description,
}) => {
// const addItem = ({ addItem } = useContext(ItemContext));
return (
<MenuItemContainer>
<img src={image} alt={name} />
<div>
<h4>{name}</h4>
<p>{description}</p>
<h5>R${price}</h5>
<button
onClick={() => {
console.log('addItem here');
}}
>
Adicionar
</button>
</div>
</MenuItemContainer>
);
};

export default MenuItem;
114 changes: 57 additions & 57 deletions frontend/src/components/MenuItem/styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,67 @@
import styled from "styled-components";
import styled from 'styled-components';

export const MenuItemContainer = styled.div`
width: 50%;
height: 18em;
margin: 5em;
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 20px;
border-radius: 0.5rem;
box-shadow: 3px 4px 10px 1px #00000033;
width: 50%;
height: 18em;
margin: 5em;
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 20px;
border-radius: 0.5rem;
box-shadow: 3px 4px 10px 1px #00000033;
img {
flex: 30%;
margin: 1.5em;
max-width: 20em;
max-height: 20em;
border-radius: 15px;
}
img {
flex: 30%;
margin: 1.5em;
max-width: 20em;
max-height: 20em;
border-radius: 15px;
}
div {
flex: 60%;
margin: 0;
display: grid;
grid-template-columns: 25% 25% 25% 6.25% 6.25% 6.25% 6.25%;
grid-template-rows: auto;
grid-template-areas:
"name name name name name . ."
"description description description . . . ."
". . . . price price ."
". . . button button button button";
div {
flex: 60%;
margin: 0;
display: grid;
grid-template-columns: 25% 25% 25% 6.25% 6.25% 6.25% 6.25%;
grid-template-rows: auto;
grid-template-areas:
'name name name name name . .'
'description description description . . . .'
'. . . . price price .'
'. . . button button button button';
h4 {
grid-area: name;
margin: 0;
padding: 0;
font-weight: bold;
}
h4 {
grid-area: name;
margin: 0;
padding: 0;
font-weight: bold;
}
p {
grid-area: description;
margin: 0;
}
p {
grid-area: description;
margin: 0;
}
h5 {
margin: 0;
grid-area: price;
font-size: 1.5em;
font-weight: bold;
}
h5 {
margin: 0;
grid-area: price;
font-size: 1.5em;
font-weight: bold;
}
button {
margin: 0.5em;
height: 2em;
grid-area: button;
margin-top: 0;
border-radius: 30px;
background: #8e3031;
text-align: center;
color: white;
font-weight: bold;
cursor: pointer;
box-shadow: 3px 4px 10px 1px #00000033;
}
button {
margin: 0.5em;
height: 2em;
grid-area: button;
margin-top: 0;
border-radius: 30px;
background: #8e3031;
text-align: center;
color: white;
font-weight: bold;
cursor: pointer;
box-shadow: 3px 4px 10px 1px #00000033;
}
}
`;
17 changes: 13 additions & 4 deletions frontend/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@
"rootDir": "src",
"baseUrl": "src",
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
Expand All @@ -15,8 +19,13 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"exclude": ["src/__tests__"]
"include": [
"src"
],
"exclude": [
"src/__tests__"
]
}

0 comments on commit 7cb2fba

Please sign in to comment.