Skip to content

Commit

Permalink
#5 profile sidebar added
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ktn-mariam
Ktn-mariam committed Nov 18, 2023
1 parent 4d16363 commit 0cbb252
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 59 deletions.
105 changes: 105 additions & 0 deletions client/src/components/ProfileSideBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
98 changes: 39 additions & 59 deletions client/src/pages/FarmerProfile.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
)
Expand Down

0 comments on commit 0cbb252

Please sign in to comment.