composants et styled components homepage, signin et dbt user

src/App.jsx

@@ -2,39 +2,33 @@
 
 import React from 'react'
 import { BrowserRouter, Switch, Route } from 'react-router-dom'
-import Footer from './components/Footer'
 // components imports
-import Header from './components/Header'
+import Footer from './components/Footer'
 // import NotFound from './pages/NotFound'
-// import User from './pages/User'
-import Homepage from './pages/Homepage'// styles imports
+import Homepage from './pages/Homepage' // styles imports
 import SignIn from './pages/SignIn'
+import User from './pages/User'
+// styles imports
 import { GlobalStyle } from './utils/styles/bases/GlobalStyle'
 
 // JSX // _________________________________________________________________
 
 /**
- * App's component to manage various routes 
- * and display corresponding pages components  
+ * App's component to manage various routes
+ * and display corresponding pages components
  * @returns {JSX}
  */
 
 const App = () => {
   return (
     <BrowserRouter>
       <GlobalStyle />
-      <Header />
-      <main className='main'>
+      <main className="main">
         <section>
           <Switch>
-          <Route exact path="/" component={Homepage} />
-          <Route exact path="/sign-in" component={SignIn} />
-
-            {/* <Route exact path="/Login" component={Login} />
-            <Route exact path="/user/:id?" component={User} /> */}
-            {/* <Route path="/homepage" component={HomePageMocked} /> */}
-            {/* <Route path="/loginbis" component={LoginPageMocked} />
-            <Route path="/user" component={UserPageMocked} /> */}
+            <Route exact path="/" component={Homepage} />
+            <Route exact path="/sign-in" component={SignIn} />
+            <Route exact path="/user/:id?" component={User} />
             {/* <Route component={NotFound} /> */}
           </Switch>
         </section>
@@ -46,4 +40,4 @@ const App = () => {
 
 // EXPORT // ______________________________________________________________
 
-export default App
+export default App

src/components/EditName.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
+export const EditNameWrapper = styled.form`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  column-gap: 1rem;
+  row-gap: 1rem;
+  padding-top: 1rem;
+`
+const EditName = ({ editName }) => {
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+
+  return (
+    <EditNameWrapper>
+      <input
+        value={firstName}
+        type="text"
+        onChange={(e) => {
+          setFirstName(e.target.value)
+        }}
+      />
+      <input
+        value={lastName}
+        type="text"
+        onChange={(e) => {
+          setLastName(e.target.value)
+        }}
+      />
+      <button>Save</button>
+      {/* <button onClick={() => {setEditName(!editName)}}>Cancel</button> */}
+    </EditNameWrapper>
+  )
+}
+
+export default EditName

src/components/Header.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import logo from '../assets/argentBankLogo.png'
-import { Nav, NavLinkElements, Logo, HeaderStyle } from '../utils/styles/components/header'
+import { Nav, NavLinkElements, Logo, HeaderStyle, NavLinksWrapper } from '../utils/styles/components/header'
 
 const Header = () => {
   return (
@@ -15,12 +15,12 @@ const Header = () => {
             height="55px"
           ></Logo>
         </NavLinkElements>
-        <div>
-          <NavLinkElements exact to="./sign-in" activeClassName="something">
+        <NavLinksWrapper>
+          <NavLinkElements exact to="/sign-in" activeClassName="something">
             <i className="fa fa-user-circle"></i>
             Sign In
           </NavLinkElements>
-        </div>
+        </NavLinksWrapper>
       </Nav>
     </HeaderStyle>
   )

src/components/HeaderUser.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import logo from '../assets/argentBankLogo.png'
+import {
+  HeaderStyle,
+  Logo,
+  Nav,
+  NavLinkElements,
+  NavLinksWrapper,
+} from '../utils/styles/components/header'
+
+const HeaderUser = () => {
+
+  return (
+    <HeaderStyle>
+      <Nav>
+        <NavLinkElements exact to="/" activeClassName="something">
+          <h1 className="sr-only">Argent Bank</h1>
+          <Logo
+            src={logo}
+            alt="Argent Bank Logo"
+            width="200px"
+            height="55px"
+          ></Logo>
+        </NavLinkElements>
+        <NavLinksWrapper>
+          <NavLinkElements exact to="/user" activeClassName="something">
+            <i className="fa fa-user-circle"></i>
+            Tony
+          </NavLinkElements>
+          <NavLinkElements exact to="/" activeClassName="something">
+            <i className="fa fa-sign-out"></i>
+            Sign Out
+          </NavLinkElements>
+        </NavLinksWrapper>
+      </Nav>
+    </HeaderStyle>
+  )
+}
+
+export default HeaderUser

src/utils/styles/components/Hero.jsx → src/components/Hero.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { HeroStyle, HeroContent, Subtitle, Text } from '../../styles/components/hero'
+import { HeroStyle, HeroContent, Subtitle, Text } from '../utils/styles/components/hero'
 
 const Hero = () => {
   return (

src/pages/Homepage.jsx

@@ -1,13 +1,17 @@
 import React from 'react'
 import Features from '../components/Features'
-import Hero from '../utils/styles/components/Hero'
+import Header from '../components/Header'
+import Hero from '../components/Hero'
 
 const Homepage = () => {
   return (
-    <main>
-      <Hero />
-      <Features />
-    </main>
+    <div>
+      <Header />
+      <main>
+        <Hero />
+        <Features />
+      </main>
+    </div>
   )
 }
 

src/pages/SignIn.jsx

@@ -1,43 +1,49 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
+import Header from '../components/Header'
 import Input from '../components/Input'
+import { Button } from '../utils/styles/components/button'
 import {
   SignInMain,
   SignInSection,
   SignInSectionHeader,
   SignInIcon,
   SignInTitle,
-  SignInButton,
 } from '../utils/styles/pages/signIn'
 
 const SignIn = () => {
   return (
-    <SignInMain>
-      <SignInSection>
-        <SignInSectionHeader>
-          <SignInIcon className="fa fa-user-circle"></SignInIcon>
-          <SignInTitle>Sign In</SignInTitle>
-        </SignInSectionHeader>
-        <form method="GET">
-          <Input
-            direction={'column'}
-            forAndId={'username'}
-            inputType={'text'}
-          />
-          <Input
-            direction={'column'}
-            forAndId={'password'}
-            inputType={'password'}
-          />
-          <Input
-            direction={'row-reverse'}
-            forAndId={'remember-me'}
-            inputType={'checkbox'}
-          />
-          <a href="./user.html">Page User (provisoire)</a>
-        </form>
-        <SignInButton type="submit" value="Sign In" />
-      </SignInSection>
-    </SignInMain>
+    <div>
+      <Header />
+      <SignInMain>
+        <SignInSection>
+          <SignInSectionHeader>
+            <SignInIcon className="fa fa-user-circle"></SignInIcon>
+            <SignInTitle>Sign In</SignInTitle>
+          </SignInSectionHeader>
+          <form method="GET">
+            <Input
+              direction={'column'}
+              forAndId={'username'}
+              inputType={'text'}
+            />
+            <Input
+              direction={'column'}
+              forAndId={'password'}
+              inputType={'password'}
+            />
+            <Input
+              direction={'row-reverse'}
+              forAndId={'remember-me'}
+              inputType={'checkbox'}
+            />
+          </form>
+          <Link to="/user/:id?">Page User (provisoire)</Link>
+
+          <Button type="submit"width='100%' value='Sign In' />
+        </SignInSection>
+      </SignInMain>
+    </div>
   )
 }