Done

sonuku092 · Mar 15, 2024 · 6f55c8a · 6f55c8a
1 parent 678325a
commit 6f55c8a
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 38 deletions.
diff --git a/frontend/src/components/Profile/Profile.js b/frontend/src/components/Profile/Profile.js
@@ -1,44 +1,74 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import styles from './Profile.module.css'
 import OutputControl from '../assets/InputControl/OutputControl'
-import { Firestore } from 'firebase/firestore'
-import { db } from '../../firebase'
+import { auth, db } from '../../firebase'
+import { Navbar } from '../assets'
 
 function Profile() {
 
+    useEffect(() => {
+        auth.onAuthStateChanged((user) => {
+            if (user) {
+                console.log('User is signed in', user.uid);
+                const userName = user.displayName;
+
+                // Get the Firestore document reference for the user
+                // const userRef = db.collection('Users').doc();
+
+                // // Retrieve the user data from Firestore
+                // userRef.get().then((doc) => {
+                //     if (doc.exists) {
+                //         const userData = doc.data();
+                //         console.log('User data:', userData);
+                //         // Do something with the user data
+                //     } else {
+                //         console.log('User data not found');
+                //     }
+                // }).catch((error) => {
+                //     console.log('Error getting user data:', error);
+                // });
+            } else {
+                console.log('User is signed out');
+            }
+        });
+    }, []);
+
 
   return (
-    <div className={styles.container}>
-        <div className={styles.profile}>
+    <section>
+
+        <Navbar />
+
+        <div className={`${styles.profile} `}>
             <div className={styles.profileImage}>
                 <img src="https://via.placeholder.com/150" alt="Profile" />
 
                 <button className={styles.uploadBtn}>
                     <i className="fas fa-camera"></i>
                 </button>
             </div>
-            <div className="grid grid-flow-row-dense grid-cols-2 items-center grid-rows-3 gap-2 justify-center">
-                <div className="w-[480px]">
+            <div className="grid grid-flow-row-dense grid-cols-2 items-center min-w-[50%] max-w-full gap-2 justify-center">
+                <div className="">
                     <OutputControl label="Name" value="Sonu Kumar" />
                 </div>
-                <div className="w-[480px]">
+                <div className="">
                     <OutputControl label="Age" value="22 Year" />
                 </div>
-                <div className="w-[480px]">
+                <div className="">
                     <OutputControl label="Gender" value="Male" />
                 </div>
-                <div className="w-[480px]">
+                <div className="">
                 <OutputControl label="Email" value="sonu@gmail.com" />
                 </div>
-                <div className="w-[480px]">
+                <div className="">
                 <OutputControl label="Phone" value="1234567890" />
                 </div>
-                <div className="w-[480px]">
+                <div className="">
                 <OutputControl label="Address" value="Bangalore, Karnataka" />
                 </div>
             </div>
         </div>
-    </div>
+    </section>
   )
 }
 

diff --git a/frontend/src/components/Profile/Profile.module.css b/frontend/src/components/Profile/Profile.module.css
@@ -1,22 +1,11 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100vh;
-  width: 100%;
-  padding: 20px;
-  background-color: rgb(243, 248, 248);
-}
 
 .profile {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
-  padding: 20px;
-  background-color: white;
+  padding: 60px;
   border-radius: 10px;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
 .profileImage {

diff --git a/frontend/src/components/assets/InputControl/OutputControl.js b/frontend/src/components/assets/InputControl/OutputControl.js
@@ -5,8 +5,8 @@ import styles from './OutputControl.module.css';
 function OutputControl({ label, value }) {
   return (
     <div className={styles.outputContainer}>
-      <div className={styles.output}>{value}</div>
       <label className={styles.label}>{label}</label>
+      <div className={styles.output}>{value}</div>
     </div>
   );
 }

diff --git a/frontend/src/components/assets/InputControl/OutputControl.module.css b/frontend/src/components/assets/InputControl/OutputControl.module.css
@@ -1,30 +1,24 @@
 /* OutputControl.module.css */
 
-.outputContainer {
-    position: relative;
-  }
 
   .output {
-    padding: 10px;
-    padding-top: 15px;
+    padding: 8px 10px;
     border: 1px solid cadetblue; /* Default border color */
     border-radius: 5px;
     width: 100%;
-    background-color: #f5f5f5; /* Background color for output */
     color: #647674; /* Text color for output */
     font-size: 1rem;
     font-weight: 700;
     line-height: 1.5;
   }
 
   .label {
-    position: absolute;
     top: 1px;
     left: 8px;
     padding: 0 5px;
     color: cadetblue;
     font-size: 0.8rem;
-    font-weight: 500;
+    font-weight: 700;
     pointer-events: none;
     transition: 0.3s ease-in-out;
   }

diff --git a/frontend/src/components/assets/Navbar.jsx b/frontend/src/components/assets/Navbar.jsx
@@ -46,7 +46,7 @@ const Navbar = () => {
         <div
           className={`${
             !toggle ? "hidden" : "flex flex-col"
-          } backdrop-blur-sm shadow-md bg-blue-100 absolute top-[50px] border-[1px] border-dimWhite right-12 mx-2 my-2 p-[4px] min-w-[240px] rounded-lg sidebar`}
+          } backdrop-blur-sm shadow-md bg-blue-100 absolute top-[50px] border-[1px] border-black/20 right-12 mx-2 my-2 p-[4px] min-w-[240px] rounded-lg sidebar`}
         >
           <h3 className="font-poppins font-normal  text-center text-black">
             Menu
@@ -62,7 +62,7 @@ const Navbar = () => {
                 }`}
                 onClick={() => setActive(nav.title)}
               >
-                <a href={`#${nav.id}`} className="flex">
+                <a href={`${nav.id}`} className="flex">
                   {nav.title}
                 </a>
               </li>

diff --git a/frontend/src/components/assets/constants.js b/frontend/src/components/assets/constants.js
@@ -1,7 +1,7 @@
 export const navLinks = [
     {
-      id: "account",
-      title: "Account",
+      id: "profile",
+      title: "Profile",
     },
     {
       id: "about",