Header Section

rohitverma0234 · Jan 25, 2024 · 6618924 · 6618924
1 parent f74171f
commit 6618924
Show file tree

Hide file tree

Showing 18 changed files with 712 additions and 361 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.6",
+    "@mui/material": "^5.15.6",
     "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

diff --git a/public/images/gmail.png b/public/images/gmail.png
diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,8 @@
       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`.
     -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
     <title>React Redux App</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -1,39 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-float infinite 3s ease-in-out;
-  }
-}
-
-.App-header {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-}
-
-.App-link {
-  color: rgb(112, 76, 182);
-}
-
-@keyframes App-logo-float {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(10px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}

diff --git a/src/App.js b/src/App.js
@@ -1,56 +1,12 @@
 import React from 'react';
-import logo from './logo.svg';
-import { Counter } from './features/counter/Counter';
 import './App.css';
+import Header from './Header';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Counter />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <span>
-          <span>Learn </span>
-          <a
-            className="App-link"
-            href="https://reactjs.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux-toolkit.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux Toolkit
-          </a>
-          ,<span> and </span>
-          <a
-            className="App-link"
-            href="https://react-redux.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React Redux
-          </a>
-        </span>
-      </header>
+    <div className="app">
+    <Header/>
+    <h1>Lets build gmail</h1>
     </div>
   );
 }

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Header.css b/src/Header.css
@@ -0,0 +1,69 @@
+.material-icons-outlined {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;  /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+  }
+
+  .header__left > img{
+    object-fit: contain;
+    margin-left: 5px;
+  }
+
+  .header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid whitesmoke;
+  }
+
+  .header__left{
+    display: flex;
+    align-items: center;
+  }
+
+  .header__middle{
+    display: flex;
+    flex: 0.7;
+    align-items: center;
+    background-color: whitesmoke;
+    padding: 10px;
+    border-radius: 5px;
+  }
+
+  .header__middle > .material-icons-outlined{
+    color: grey;
+  }
+
+
+  .header__middle > input{
+    border:none;
+    width: 100%;
+    padding: 10px;
+    outline: 0;
+    font-size: medium;
+    background-color: transparent;
+  }
+
+  .header__right{
+    display: flex;
+    padding-right: 20px;
+  }
diff --git a/src/Header.js b/src/Header.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import "./Header.css"
+import { Avatar, IconButton } from '@mui/material';
+
+const Header = () => {
+  return (
+    <div className='header'>
+
+        <div className='header__left'>
+        <IconButton>
+        <span className="material-icons-outlined">menu</span>
+        </IconButton>
+
+        <img src="./images/gmail.png" alt=''/>
+
+        </div>
+
+        <div className='header__middle'>
+        <span className="material-icons-outlined">search</span>
+        <input placeholder='search-mail' type='text'/>
+        <span className="material-icons-outlined header__inputCaret">arrow_drop_down</span>
+        </div>
+
+        <div className='header__right'>
+        <IconButton>
+        <span class="material-icons-outlined">apps</span>
+        </IconButton>
+
+        <IconButton>
+        <span class="material-icons-outlined">notifications</span>
+        </IconButton>
+
+        <Avatar/>
+
+
+
+
+
+        </div>
+
+    </div>
+  )
+}
+
+export default Header
diff --git a/src/app/store.js b/src/app/store.js
@@ -1,5 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
-import counterReducer from '../features/counter/counterSlice';
+import counterReducer from '../features/counterSlice';
 
 export const store = configureStore({
   reducer: {

diff --git a/src/features/counter/Counter.js b/src/features/counter/Counter.js