Header component

sahandsn · Apr 21, 2023 · 4447127 · 4447127
1 parent e664fc9
commit 4447127
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.vscode
 
 # testing
 /coverage

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <script
+      src="https://kit.fontawesome.com/4051ec24f1.js"
+      crossorigin="anonymous"
+    ></script>
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
@@ -24,7 +28,7 @@
       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>
+    <title>Online Shop</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -0,0 +1,33 @@
+import logo from './logo.png'
+
+export default function Header() {
+  // flex justify-between items-center
+  return (
+    <header id='header' className='grid grid-cols-3 px-4 sticky top-0'>
+      <div id='user-detail' className='flex justify-start items-center'>
+        <div className='flex items-center justify-start'>
+          <i className='fa-regular fa-circle-user fs-2 fa-2xl'></i>
+          <p className='mb-0 ms-2 hidden sm:block'>Hi, James</p>
+        </div>
+      </div>
+      <div id='logo' className='flex justify-center items-center'>
+        <div>
+          <img src={logo} alt='shopify logo' />
+        </div>
+      </div>
+      <div id='cart' className='flex justify-end items-center'>
+        <div className='flex items-center justify-end'>
+          <p className='mb-0 mr-2' id='cart-text'>
+            Cart
+          </p>
+          <div
+            className='text-white bg-red-600 circle flex items-center justify-center'
+            id='cart-number'
+          >
+            0
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/src/components/Header/logo.png b/src/components/Header/logo.png
diff --git a/src/index.css b/src/index.css
@@ -2,3 +2,32 @@
 @tailwind components;
 @tailwind utilities;
 
+#header img {
+  width: 100px;
+}
+
+#header a {
+  text-decoration: none;
+  color: black;
+}
+
+#header {
+  background-color: #e0e0e0;
+}
+
+.circle {
+  border-radius: 50%;
+  font-size: 12px;
+  width: 11px;
+  height: 11px;
+  padding: 11px;
+}
+
+.card {
+  width: 380px;
+  height: 300px;
+}
+
+.description p {
+  text-align: justify;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ @@
     /node_modules
     /.pnp
     .pnp.js
+    .vscode
     # testing
     /coverage
@@ Expand Down @@