Structure Components

.eslintrc.json

@@ -33,5 +33,12 @@
       "no-unused-vars": "warn",
       "import/prefer-default-export": "off",
       "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+    },
+    "settings": {
+      "import/resolver": {
+        "node": {
+          "paths": ["src"]
+        }
+      }
     }
 }

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

src/App.js

@@ -1,11 +1,20 @@
 import { ThemeProvider } from 'styled-components'
-import GlobalStyles from './styles/global'
-import theme from './styles/theme'
+import GlobalStyles from 'styles/global'
+import theme from 'styles/theme'
+
+import ScreenResolution from 'components/ScreenResolution'
+import ScreenSize from 'components/ScreenSize'
+import Main from 'components/Main'
+import Footer from 'components/Footer'
 
 const App = () => (
   <ThemeProvider theme={theme}>
     <GlobalStyles />
-    <h1>ScreenResolution</h1>
+    <Main>
+      <ScreenResolution />
+      <ScreenSize />
+      <Footer />
+    </Main>
   </ThemeProvider>
 )
 

src/components/Footer/index.jsx

@@ -0,0 +1,7 @@
+import * as S from './styles'
+
+const Footer = () => {
+  return <S.Wrapper>Made with [heart] by theandersonn</S.Wrapper>
+}
+
+export default Footer

src/components/Footer/styles.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.footer``

src/components/Main/index.jsx

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types'
+
+import * as S from './styles'
+
+const Main = ({ children }) => {
+  return <S.Wrapper>{children}</S.Wrapper>
+}
+
+Main.propTypes = {
+  children: PropTypes.elementType.isRequired
+}
+
+export default Main

src/components/Main/styles.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.main``

src/components/ScreenResolution/index.jsx

@@ -0,0 +1,13 @@
+import * as S from './styles'
+
+const ScreenResolution = () => {
+  return (
+    <S.Wrapper>
+      <h2>Screen Resolution is</h2>
+      <p>Screen Width: {window.outerWidth} pixels</p>
+      <p>Screen Height: {window.outerHeight} pixels</p>
+    </S.Wrapper>
+  )
+}
+
+export default ScreenResolution

src/components/ScreenResolution/styles.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.article``

src/components/ScreenSize/index.jsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+
+import * as S from './styles'
+
+const ScreenSize = () => {
+  const [dimensions, setDimensions] = useState({
+    height: window.innerHeight,
+    width: window.innerWidth
+  })
+
+  useEffect(() => {
+    function handleResize() {
+      setDimensions({
+        height: window.innerHeight,
+        width: window.innerWidth
+      })
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  })
+
+  return (
+    <S.Wrapper>
+      <h2>Screen Size is</h2>
+      <p>Screen Width: {dimensions.width} pixels</p>
+      <p>Screen Height: {dimensions.height} pixels</p>
+    </S.Wrapper>
+  )
+}
+
+export default ScreenSize

src/components/ScreenSize/styles.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.article``