Skip to content

Instantly share code, notes, and snippets.

@omariosouto
Created January 18, 2022 13:15
Show Gist options
  • Save omariosouto/983909257ff37d47c6bc31dd286f6caa to your computer and use it in GitHub Desktop.
Save omariosouto/983909257ff37d47c6bc31dd286f6caa to your computer and use it in GitHub Desktop.
Aluracord - Arquivos da Aula 01
{
"name": "Aluracord - Matrix (peas)",
"theme": {
"colors": {
"primary": {
"050": "#E3F9E5",
"100": "#C1EAC5",
"200": "#A3D9A5",
"300": "#7BC47F",
"400": "#57AE5B",
"500": "#3F9142",
"600": "#2F8132",
"700": "#207227",
"800": "#0E5814",
"900": "#05400A"
},
"neutrals": {
"000": "#FFFFFF",
"050": "#F5F7FA",
"100": "#E4E7EB",
"200": "#CBD2D9",
"300": "#9AA5B1",
"400": "#52667A",
"500": "#313D49",
"600": "#29333D",
"700": "#212931",
"800": "#181F25",
"900": "#101418",
"999": "#080A0C"
}
}
},
"stickers": [
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_1.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_2.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_3.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_4.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_5.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_6.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_7.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_8.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_9.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_10.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_11.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_12.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_13.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_14.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_15.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_16.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_17.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_18.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_19.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_20.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_21.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_22.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_23.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_24.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_25.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_26.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_27.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_28.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_29.png",
"https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_30.png",
"http://2.bp.blogspot.com/-d21tffsTIQo/U_H9QjC69gI/AAAAAAAAKqM/wnvOyUr6a_I/s1600/Pikachu%2B2.gif",
"https://media1.giphy.com/media/BdghqxNFV4efm/200.gif",
"https://c.tenor.com/TKpmh4WFEsAAAAAC/alura-gaveta-filmes.gif",
"https://i.pinimg.com/originals/0b/1c/23/0b1c2307c83e1ebdeed72e41b9a058ad.gif",
"https://c.tenor.com/VylWt5lyjBoAAAAC/omg-yes.gif",
"https://i.pinimg.com/originals/96/34/c5/9634c520c9a3cd4e7f23190bb2c96500.gif"
]
}
import { Box, Button, Text, TextField, Image } from '@skynexui/components';
import appConfig from '../config.json';
function GlobalStyle() {
return (
<style global jsx>{`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
body {
font-family: 'Open Sans', sans-serif;
}
/* App fit Height */
html, body, #__next {
min-height: 100vh;
display: flex;
flex: 1;
}
#__next {
flex: 1;
}
#__next > * {
flex: 1;
}
/* ./App fit Height */
`}</style>
);
}
function Titulo(props) {
const Tag = props.tag || 'h1';
return (
<>
<Tag>{props.children}</Tag>
<style jsx>{`
${Tag} {
color: ${appConfig.theme.colors.neutrals['000']};
font-size: 24px;
font-weight: 600;
}
`}</style>
</>
);
}
// Componente React
// function HomePage() {
// // JSX
// return (
// <div>
// <GlobalStyle />
// <Titulo tag="h2">Boas vindas de volta!</Titulo>
// <h2>Discord - Alura Matrix</h2>
// </div>
// )
// }
// export default HomePage
export default function PaginaInicial() {
const username = 'peas';
return (
<>
<GlobalStyle />
<Box
styleSheet={{
display: 'flex', alignItems: 'center', justifyContent: 'center',
backgroundColor: appConfig.theme.colors.primary[500],
backgroundImage: 'url(https://virtualbackgrounds.site/wp-content/uploads/2020/08/the-matrix-digital-rain.jpg)',
backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundBlendMode: 'multiply',
}}
>
<Box
styleSheet={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: {
xs: 'column',
sm: 'row',
},
width: '100%', maxWidth: '700px',
borderRadius: '5px', padding: '32px', margin: '16px',
boxShadow: '0 2px 10px 0 rgb(0 0 0 / 20%)',
backgroundColor: appConfig.theme.colors.neutrals[700],
}}
>
{/* Formulário */}
<Box
as="form"
styleSheet={{
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
width: { xs: '100%', sm: '50%' }, textAlign: 'center', marginBottom: '32px',
}}
>
<Titulo tag="h2">Boas vindas de volta!</Titulo>
<Text variant="body3" styleSheet={{ marginBottom: '32px', color: appConfig.theme.colors.neutrals[300] }}>
{appConfig.name}
</Text>
<TextField
fullWidth
textFieldColors={{
neutral: {
textColor: appConfig.theme.colors.neutrals[200],
mainColor: appConfig.theme.colors.neutrals[900],
mainColorHighlight: appConfig.theme.colors.primary[500],
backgroundColor: appConfig.theme.colors.neutrals[800],
},
}}
/>
<Button
type='submit'
label='Entrar'
fullWidth
buttonColors={{
contrastColor: appConfig.theme.colors.neutrals["000"],
mainColor: appConfig.theme.colors.primary[500],
mainColorLight: appConfig.theme.colors.primary[400],
mainColorStrong: appConfig.theme.colors.primary[600],
}}
/>
</Box>
{/* Formulário */}
{/* Photo Area */}
<Box
styleSheet={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
maxWidth: '200px',
padding: '16px',
backgroundColor: appConfig.theme.colors.neutrals[800],
border: '1px solid',
borderColor: appConfig.theme.colors.neutrals[999],
borderRadius: '10px',
flex: 1,
minHeight: '240px',
}}
>
<Image
styleSheet={{
borderRadius: '50%',
marginBottom: '16px',
}}
src={`https://github.com/${username}.png`}
/>
<Text
variant="body4"
styleSheet={{
color: appConfig.theme.colors.neutrals[200],
backgroundColor: appConfig.theme.colors.neutrals[900],
padding: '3px 10px',
borderRadius: '1000px'
}}
>
{username}
</Text>
</Box>
{/* Photo Area */}
</Box>
</Box>
</>
);
}
@lucasrmagalhaes
Copy link

Valeu!

@PedroZakyo
Copy link

obrigado!

@chritianegozza
Copy link

obrigada por tudo.

Copy link

ghost commented Feb 2, 2022

Excelente material, Estão de parabéns.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment