refactor: imp some components

This commit is contained in:
Daniel Soares
2021-12-12 23:45:41 -03:00
parent 47bd52ffd7
commit 7b7e6b9cbd
13 changed files with 217 additions and 143 deletions

View File

@@ -1,8 +1,13 @@
import type { AppProps } from 'next/app'
import { DataProvider } from '../contexts/DataContext'
import { globalStyles } from '../styles/globals'
export default function App({ Component, pageProps }: AppProps) {
globalStyles()
return <Component {...pageProps} />
return (
<DataProvider>
<Component {...pageProps} />
</DataProvider>
)
}

View File

@@ -1,6 +1,6 @@
import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
import { fonts, getCssText } from '../styles/stitches.config'
import { getCssText } from '../styles/stitches.config'
export default class Document extends NextDocument {
render() {
@@ -9,7 +9,10 @@ export default class Document extends NextDocument {
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href={fonts['baloo'].href} rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500&family=Montserrat:wght@400;500&family=Roboto:wght@400;500&display=swap"
rel="stylesheet"
/>
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
</Head>
<body>

View File

@@ -1,67 +1,5 @@
import { Avatar } from '../components/Avatar'
import { Button } from '../components/Button'
import { SocialLinks } from '../components/SocialLinks'
import { Home } from '../components/Home'
export default function Home() {
const links = [
{
label: 'Home',
href: '#'
},
{
label: 'About',
href: '/about'
},
{
label: 'Contact',
href: '/contact'
}
]
const socialLinks = [
{
label: 'Email',
href: '1'
},
{
label: 'GitHub',
href: '2'
},
{
label: 'LinkedIn',
href: '3'
},
{
label: 'Dev',
href: '4'
},
{
label: 'Instagram',
href: '5'
},
{
label: 'WhatsApp',
href: '6'
}
]
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
height: '100vh',
gap: '1rem'
}}
>
<Avatar src="/avatar.jpeg" />
<SocialLinks socialLinks={socialLinks} color="rose" />
{links.map(link => (
<Button color="sky" schema="rounded" outline key={link.href}>
{link.label}
</Button>
))}
</div>
)
export default function HomePage() {
return <Home />
}