first commit homepage

MelanieSarrouy · Nov 16, 2021 · fb43b29 · fb43b29
1 parent ff2a31d
commit fb43b29
Show file tree

Hide file tree

Showing 22 changed files with 983 additions and 109 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2
+}
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
@@ -34,5 +35,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.4.1",
+    "styled-components": "^5.3.3"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
+
   <head>
+
+    <!-- Informations pour le navigateur -->
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="./favicon.ico" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    <link rel="manifest" href="./manifest.json" />
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <!-- Informations pour le SEO -->
+    <title>HRnet</title>
+    <meta name="description" content="employee file management" />
+
+    <!-- Feuiles de styles -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Roboto:ital,wght@0,100;0,500;0,700;1,100;1,400&display=swap" rel="stylesheet"> 
+
   </head>
+
   <body>
+
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+    <div id="root"></div>
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
-</html>
+
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,26 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Header from './components/Header';
+import { GlobalStyle } from './styles/bases/globalStyle';
+import Homepage from './pages/Homepage'
+
+function App() {
+  return (
+    <>
+      <BrowserRouter>
+        <GlobalStyle />
+        <Header />
+        <main>
+          <section>
+            <Routes>
+              <Route path="/" element={<Homepage />} />
+              {/* <Route exact path="/employee-list" component={SignIn} />
+              <Route component={NotFound} /> */}
+            </Routes>
+          </section>
+        </main>
+      </BrowserRouter>
+    </>
+  );
+}
+
+export default App;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { NavStyled, StyledLink, Title1 } from '../styles/components/header'
+
+
+const Header = () => {
+  return (
+    <div>
+      <div>
+        <Link to="/">
+          <Title1>HRnet</Title1>
+        </Link>
+      </div>
+      <NavStyled>
+        <StyledLink to="/">
+          Create Employee
+        </StyledLink>
+        <StyledLink to="/employee-list">
+          Current Employees
+        </StyledLink>
+      </NavStyled>
+    </div>
+  )
+}
+
+export default Header
diff --git a/src/components/Input.jsx b/src/components/Input.jsx
@@ -0,0 +1,50 @@
+import { InputLabel, InputStyle, InputWrapper } from "../styles/components/input"
+
+/**
+ * Function capitalizeFirstLetter to capitalize label's first letter
+ * @function
+ * @name capitalizeFirstLetter
+ * @param {string} string 
+ * @returns {string}
+ */
+ function capitalizeFirstLetter(string) {
+  const regex = /-/gi 
+  const newString = string.replace(regex, ' ')
+  return newString
+    .toLowerCase()
+    .split(' ')
+    .map(word => {
+      return word[0].toUpperCase() + word.substr(1)
+    })
+    .join(' ')
+}
+
+/**
+ * Input component to display input buttons
+ * @name Input
+ * @param {string} forAndId
+ * @param {string} inputType
+ * @param {string} direction
+ * @param {string} value
+ * @param {string} onChange
+ * @returns {?JSX}
+ */
+
+const Input = ({ forAndId, inputType, direction, value, onChange }) => {
+
+  return (
+    <InputWrapper direction={direction}>
+      <InputLabel htmlFor={forAndId}>
+        {capitalizeFirstLetter(forAndId)}
+      </InputLabel>
+      <InputStyle
+        type={inputType}
+        id={forAndId}
+        value={value}
+        onChange={onChange}
+      />
+    </InputWrapper>
+  )
+}
+
+export default Input
diff --git a/src/datas/department.js b/src/datas/department.js
@@ -0,0 +1,9 @@
+const departments = [
+  'Sales',
+  'Marketing',
+  'Engineering',
+  'Human Resources',
+ 'Legal'
+]
+
+export default departments