10 |
11 | Homepage
12 |
13 |
14 |
15 | ReactJS Structure
16 | A ReactJS + Next.js structure made by Rocketseat
17 |
18 | )
19 | }
20 |
21 | export default Home
22 |
--------------------------------------------------------------------------------
/src/styles/global.ts:
--------------------------------------------------------------------------------
1 | import { createGlobalStyle } from 'styled-components'
2 |
3 | export default createGlobalStyle`
4 | * {
5 | margin: 0;
6 | padding: 0;
7 | box-sizing: border-box;
8 | }
9 | body {
10 | background: ${props => props.theme.colors.background};
11 | color: ${props => props.theme.colors.text};
12 | font: 400 16px Roboto, sans-serif;
13 | }
14 | `
15 |
--------------------------------------------------------------------------------
/src/styles/pages/Home.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | export const Container = styled.div`
4 | width: 100vw;
5 | height: 100vh;
6 |
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | flex-direction: column;
11 |
12 | h1 {
13 | font-size: 54px;
14 | color: ${props => props.theme.colors.primary};
15 | margin-top: 40px;
16 | }
17 |
18 | p {
19 | margin-top: 24px;
20 | font-size: 24px;
21 | line-height: 32px;
22 | }
23 | `
24 |
--------------------------------------------------------------------------------
/src/styles/styles.d.ts:
--------------------------------------------------------------------------------
1 | import 'styled-components'
2 |
3 | import theme from './theme'
4 |
5 | export type Theme = typeof theme
6 |
7 | declare module 'styled-components' {
8 | // eslint-disable-next-line @typescript-eslint/no-empty-interface
9 | export interface DefaultTheme extends Theme {}
10 | }
11 |
--------------------------------------------------------------------------------
/src/styles/theme.ts:
--------------------------------------------------------------------------------
1 | const theme = {
2 | colors: {
3 | background: '#121214',
4 | text: '#e1e1e6',
5 | primary: '#8257e6'
6 | }
7 | }
8 |
9 | export default theme
10 |
--------------------------------------------------------------------------------
/src/test.d.ts:
--------------------------------------------------------------------------------
1 | interface TestProps {
2 | name: string
3 | }
4 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "strict": false,
12 | "forceConsistentCasingInFileNames": true,
13 | "noEmit": true,
14 | "esModuleInterop": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "jsx": "preserve"
20 | },
21 | "include": [
22 | "next-env.d.ts",
23 | "**/*.ts",
24 | "**/*.tsx"
25 | ],
26 | "exclude": [
27 | "node_modules"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------