added: styled-components; prop-types; Avatar

package.json

@@ -27,10 +27,12 @@
     "pdf-builder"
   ],
   "devDependencies": {
+    "node-sass": "^7.0.1",
     "react-scripts": "5.0.0",
-    "node-sass": "^7.0.1"
+    "styled-components": "^5.3.3"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "uimini": "^2.0.7"

src/App.js

@@ -1,14 +1,18 @@
 import React from 'react'
 
-import { Header, Footer } from './components'
+import { Header, Footer, Avatar } from './components'
 
 const App = () => {
+  const handleAvatarClick = () => console.log('avatar clicked')
+  const handlePrintClick = () => console.log('print button clicked')
+
   return (
     <div className='ui-wrapper'>
-      <Header />
+      <Header onClick={handlePrintClick} />
       <div className='ui-content-wrapper'>
         <section className='ui-section'>
           <div className='ui-container'>
+            <Avatar onClick={handleAvatarClick} />
             <h1 className='ui-title-1'>Hello world!</h1>
           </div>
         </section>

src/components/Footer/Footer.jsx

@@ -4,8 +4,12 @@ import './Footer.scss'
 
 const Footer = () => {
   return (
-    <footer>
-      <div className='ui-container'>footer</div>
+    <footer className='Footer'>
+      <div className='ui-container'>
+        <a className='ui-link' href='#' target='_blank'>
+          Github
+        </a>
+      </div>
     </footer>
   )
 }

src/components/Footer/Footer.scss

@@ -0,0 +1,4 @@
+.Footer {
+  margin-top: 1rem;
+  text-align: center;
+}

src/components/Header/Header.jsx

@@ -1,13 +1,29 @@
 import React from 'react'
+import propTypes from 'prop-types'
 
 import './Header.scss'
 
-const Header = () => {
+const Header = ({ onClick }) => {
   return (
-    <header>
-      <div className='ui-container'>header</div>
+    <header className='Header'>
+      <div className='ui-container'>
+        <div className='Header_content'>
+          <span className='Header_logo'>Cv builder</span>
+          <button className='ui-button isLink' onClick={onClick}>
+            Print
+          </button>
+        </div>
+      </div>
     </header>
   )
 }
 
+Header.propTypes = {
+  onClick: propTypes.func,
+}
+
+Header.defaultProps = {
+  onClick: () => {},
+}
+
 export default Header

src/components/Header/Header.scss

@@ -1,3 +1,14 @@
-header {
-  background-color: red;
+.Header {
+  padding: 1rem 0;
+  margin-bottom: 1rem;
+}
+
+.Header_content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.Header_logo {
+  font-weight: 700;
 }

src/components/UI/Avatar/Avatar.jsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+import propTypes from 'prop-types'
+
+const Avatar = styled.div`
+  width: 10rem;
+  height: 10rem;
+  margin-right: 4rem;
+  border-radius: ${(props) => (props.isSquare ? '10px' : '50%')};
+  background-color: #bfbfbf;
+`
+
+Avatar.propTypes = {
+  isSquare: propTypes.bool,
+  onClick: propTypes.func,
+}
+
+Avatar.defaultProps = {
+  isSquare: false,
+  onClick: () => {},
+}
+
+export default Avatar

src/components/UI/Avatar/index.js

@@ -0,0 +1,3 @@
+import Avatar from './Avatar'
+
+export default Avatar

src/components/index.js

@@ -1,3 +1,6 @@
 // components:
 export { default as Header } from './Header'
 export { default as Footer } from './Footer'
+
+// UI components:
+export { default as Avatar } from './UI/Avatar'