From 0cbb252a585f89c01aa3654f87a9ffaa5960ea4a Mon Sep 17 00:00:00 2001
From: Mariam Khatoon <mariamkhatoon996@gmail.com>
Date: Sat, 18 Nov 2023 14:56:31 +0400
Subject: [PATCH] #5 profile sidebar added

---
 client/src/components/ProfileSideBar.tsx | 105 +++++++++++++++++++++++
 client/src/pages/FarmerProfile.tsx       |  98 +++++++++------------
 2 files changed, 144 insertions(+), 59 deletions(-)
 create mode 100644 client/src/components/ProfileSideBar.tsx

diff --git a/client/src/components/ProfileSideBar.tsx b/client/src/components/ProfileSideBar.tsx
new file mode 100644
index 0000000..16a2867
--- /dev/null
+++ b/client/src/components/ProfileSideBar.tsx
@@ -0,0 +1,105 @@
+import React from 'react'
+import RatingStats from './RatingStats'
+import EditIcon from '@mui/icons-material/Edit'
+import LocationOnIcon from '@mui/icons-material/LocationOn'
+import PhonelinkRingIcon from '@mui/icons-material/PhonelinkRing'
+import PersonAddAlt1Icon from '@mui/icons-material/PersonAddAlt1'
+import MyLocationIcon from '@mui/icons-material/MyLocation'
+import AccountCircleIcon from '@mui/icons-material/AccountCircle'
+
+interface ProductCardProps {
+  editable: boolean
+  isFarmer: boolean
+}
+
+const ProfileSideBar: React.FC<ProductCardProps> = ({ editable, isFarmer }) => {
+  return (
+    <div>
+      <div className="col-span-1 px-10 py-10 border border-1 border-zinc-300 rounded-2xl mb-10">
+        <div className="w-74 h-64 flex items-center justify-center overflow-hidden">
+          <img
+            className="object-cover w-full h-full"
+            src="/mazaara-farm.webp"
+            alt=""
+          />
+        </div>
+        <div className="flex items-center gap-3 justify-between  pt-3">
+          <h1 className="text-2xl font-bold">Mariam Khatoon</h1>
+          {editable ? (
+            <div className="rounded-md py-0.5 px-1 hover:bg-gray-200 hover:cursor-pointer">
+              <EditIcon fontSize="small" />
+            </div>
+          ) : (
+            <div className="rounded-md py-0.5 px-1 hover:bg-gray-200 hover:cursor-pointer">
+              <PersonAddAlt1Icon />
+            </div>
+          )}
+        </div>
+        {isFarmer && (
+          <div>
+            Family farmer. Apples, berries, litchis. Quality, sustainable
+            practices.
+          </div>
+        )}
+        <div className="flex items-center gap-3 pt-7 text-sm">
+          <PhonelinkRingIcon />
+          +971 50 243 0978
+        </div>
+        <div className="flex items-center gap-3 mt-3 text-sm">
+          <LocationOnIcon />
+          Flat 503, Sapphire Building, Silicon Oasis, Dubai, United Arab
+          Emirates
+        </div>
+        <div className="flex items-center gap-3 mt-3 text-sm">
+          <MyLocationIcon />
+          <div className="flex gap-3">
+            <div>
+              <span className="font-bold">Lat: </span>25.1279° N
+            </div>
+            <div>
+              <span className="font-bold">Long: </span>55.3863° E
+            </div>
+            <div></div>
+          </div>
+        </div>
+        <div className="pt-10">
+          {isFarmer ? (
+            <RatingStats />
+          ) : (
+            <div>
+              <h1 className="text-lg font-bold">My following</h1>
+              <div className="mt-3">
+                <div className="flex items-center gap-2 px-3 py-2 hover:bg-gray-200 rounded-md hover:cursor-pointer">
+                  <AccountCircleIcon />
+                  Mariam Khatoon
+                </div>
+                <div className="flex items-center gap-2 px-3 py-2 hover:bg-gray-200 rounded-md hover:cursor-pointer">
+                  <AccountCircleIcon />
+                  Mariam Khatoon
+                </div>
+                <div className="flex items-center gap-2 px-3 py-2 hover:bg-gray-200 rounded-md hover:cursor-pointer">
+                  <AccountCircleIcon />
+                  Mariam Khatoon
+                </div>
+                <div className="flex items-center gap-2 px-3 py-2 hover:bg-gray-200 rounded-md hover:cursor-pointer">
+                  <AccountCircleIcon />
+                  Mariam Khatoon
+                </div>
+                <div className="flex items-center gap-2 px-3 py-2 hover:bg-gray-200 rounded-md hover:cursor-pointer">
+                  <AccountCircleIcon />
+                  Mariam Khatoon
+                </div>
+                <div className="flex items-center gap-2 px-3 py-2 hover:bg-gray-200 rounded-md hover:cursor-pointer">
+                  <AccountCircleIcon />
+                  Mariam Khatoon
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ProfileSideBar
diff --git a/client/src/pages/FarmerProfile.tsx b/client/src/pages/FarmerProfile.tsx
index dda8ed9..5a56415 100644
--- a/client/src/pages/FarmerProfile.tsx
+++ b/client/src/pages/FarmerProfile.tsx
@@ -1,76 +1,56 @@
 import React from 'react'
-import RatingStats from '../components/RatingStats'
 import ProductSlider from '../components/ProductSlider'
 import CommentSection from '../components/CommentSection'
 import LocationMap from '../components/LocationMap'
-import LocationOnIcon from '@mui/icons-material/LocationOn'
-import PhonelinkRingIcon from '@mui/icons-material/PhonelinkRing'
+import StoreNavbar from '../components/StoreNavbar'
+import LogoutIcon from '@mui/icons-material/Logout'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import EditIcon from '@mui/icons-material/Edit'
+import ProfileSideBar from '../components/ProfileSideBar'
 
 const FarmerProfile = () => {
+  const editable = true // true only if farmer is veiwing his own profile
   return (
-    <div className="md:px-36 px-14 pt-10 mb-32 font-noto">
-      <div className="flex items-center gap-2 mb-5 ml-10 hover:cursor-pointer">
-        <ArrowBackIcon />
-        <h3 className="text-xl">Back</h3>
-      </div>
-      <div className="flex">
-        <div className="grid grid-cols-3 gap-10">
-          <div className="col-span-1 px-10 py-10 border border-1 border-zinc-300 rounded-2xl mb-10">
-            <div className="w-74 h-64 flex items-center justify-center overflow-hidden">
-              <img
-                className="object-cover w-full h-full"
-                src="/mazaara-farm.webp"
-                alt=""
-              />
-            </div>
-            <div className="flex items-center gap-3 justify-between">
-              <h1 className="text-2xl font-bold pt-3">Mariam Khatoon</h1>
-              <div className="hover:cursor-pointer">
-                <EditIcon fontSize="small" />
-              </div>
-            </div>
-            <div>
-              Family farmer. Apples, berries, litchis. Quality, sustainable
-              practices.
-            </div>
-            <div className="flex items-center gap-3 pt-7 text-sm">
-              <PhonelinkRingIcon />
-              +971 50 243 0978
-            </div>
-            <div className="flex items-center gap-3 mt-3 text-sm">
-              <LocationOnIcon />
-              Flat 503, Sapphire Building, Silicon Oasis, Dubai, United Arab
-              Emirates
-            </div>
-            <div className="pt-10">
-              <RatingStats />
-            </div>
+    <div>
+      {!editable && <StoreNavbar />}
+      <div className="md:px-36 px-14 pt-10 mb-32 font-noto">
+        <div className="flex items-center justify-between mx-10 mb-5">
+          <div className="flex items-center gap-2 hover:cursor-pointer">
+            <ArrowBackIcon />
+            <h3 className="text-xl">Back</h3>
           </div>
-          <div className="ml-10 col-span-2">
-            <div className="mt-7">
-              <ProductSlider
-                noOfSlides={3}
-                height={64}
-                heading={'Products sold by Mariam'}
-                editable={true}
-              />
+          {editable && (
+            <div className="flex items-center gap-2 hover:cursor-pointer">
+              <LogoutIcon />
+              <h3 className="text-xl">Logout</h3>
             </div>
-            <div className="mt-5">
-              <h1 className=" font-noto font-bold text-xl mb-5">
-                Location on Map
-              </h1>
-              <div className="h-96">
-                <LocationMap />
+          )}
+        </div>
+        <div className="flex">
+          <div className="grid grid-cols-3 gap-10">
+            <ProfileSideBar editable={editable} isFarmer={true} />
+            <div className="ml-10 col-span-2">
+              <div className="mt-7">
+                <ProductSlider
+                  noOfSlides={3}
+                  height={64}
+                  heading={'Products sold by Mariam'}
+                  editable={editable}
+                />
+              </div>
+              <div className="mt-5">
+                <h1 className="font-noto font-bold text-xl mb-5">
+                  Location on Map
+                </h1>
+                <div className="h-96">
+                  <LocationMap />
+                </div>
+              </div>
+              <div>
+                <CommentSection />
               </div>
-            </div>
-            <div>
-              <CommentSection />
             </div>
           </div>
         </div>
-        <div className="h-96"></div>
       </div>
     </div>
   )