Skip to content

Commit 8d9d0f7

Browse files
BasharElmetwaliahmedBasharElmetwaliahmed
committed
add profile styling ui
1 parent a820cff commit 8d9d0f7

23 files changed

+280
-2
lines changed

‎src/Components/Profile/EditProfile/EditProfile.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import EditProfileHeader from "./EditProfileHeader"
2+
3+
function EditProfile() {
4+
return (
5+
<div className="w-full flex flex-col mt-6">
6+
<EditProfileHeader/>
7+
</div>
8+
)
9+
}
10+
11+
export default EditProfile

‎src/Components/Profile/EditProfile/EditProfileHeader.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import profileImage from '../../../assets/images/profile/Ellipse 30.svg'
2+
import profileImage from '../../../assets/images/profile/Ellipse 30.svg'
3+
4+
function EditProfileHeader() {
5+
return (
6+
<div className='text-center'>
7+
<h4 className="text-xl font-semibold mb-4 text-center">Edit profile</h4>
8+
<div>
9+
<img src={profileImage} alt='profile image update' className='mx-auto mb-1'/>
10+
</div>
11+
<h4 className='text-lg font-bold mb-2'>Emilia William</h4>
12+
<p className='text-[rgba(184,184,184,1)]'>UI/UX designer</p>
13+
14+
</div>
15+
)
16+
}
17+
18+
export default EditProfileHeader

‎src/Components/Profile/SideBar/ProfileSideBar.jsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {NavLink} from 'react-router-dom'
2+
import profileIcon from '../../../assets/images/profile/sidebar/profile.svg'
3+
import homeIcon from '../../../assets/images/profile/sidebar/home.svg'
4+
import editProfileIcon from '../../../assets/images/profile/sidebar/editprofile.svg'
5+
import logOutIcon from '../../../assets/images/profile/sidebar/logout.svg'
6+
7+
function ProfileSideBar() {
8+
const profileNavigation=[
9+
{
10+
text:'My profile',
11+
path:'/profile',
12+
icon:profileIcon
13+
},
14+
{
15+
text:'Edit Profile',
16+
path:'/profile/edit',
17+
icon:editProfileIcon
18+
},
19+
{
20+
text:'Home',
21+
path:'/home',
22+
icon:homeIcon
23+
}
24+
]
25+
return (
26+
<div className="w-1/3 bg-[rgba(252,250,248,1)] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] h-[calc(100vh_-_99px)] sidebar">
27+
<div className='flex flex-col'>
28+
{profileNavigation.map((link,index)=><NavLink className='py-5 flex gap-3 items-center pl-11 text-2xl hover:bg-gray-300 transition-all duration-500' key={index} to={link.path}>
29+
<img src={link.icon} alt={link.text} /> {link.text}</NavLink>)}
30+
</div>
31+
32+
</div>
33+
)
34+
}
35+
36+
export default ProfileSideBar

‎src/Components/Profile/UserProfile/ProfileHeader/ProfileHeadeDetails.jsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import inviteIcon from '../../../../assets/images/profile/add-friend 1.svg'
2+
import editPersonalInformation from '../../../../assets/images/profile/writing-notepad-svgrepo-com 1.svg'
3+
import ProfileOptions from './ProfileOptions'
4+
import ProfileNumbers from './ProfileNumbers'
5+
6+
function ProfileHeadeDetails() {
7+
return (
8+
<>
9+
<div className='bg-white shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] h-96 -top-[90px] w-[488px]
10+
rounded-2xl relative px-5 py-5'>
11+
<div className='flex justify-between items-start w-full'>
12+
<button><img src={inviteIcon}/></button>
13+
<button><img src={editPersonalInformation}/></button>
14+
</div>
15+
<div className='pt-16'>
16+
<h3 className='font-bold text-center text-lg pb-[6px]'>Emilia William</h3>
17+
<p className='text-[rgba(184,184,184,1)] text-center text-sm mb-4'>UI/UX designer</p>
18+
<ProfileOptions/>
19+
<ProfileNumbers/>
20+
</div>
21+
22+
23+
24+
</div>
25+
26+
</>
27+
)
28+
}
29+
30+
export default ProfileHeadeDetails

‎src/Components/Profile/UserProfile/ProfileHeader/ProfileHeader.jsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import headerbg from '../../../../assets/images/profile/Vector 1.svg'
2+
import profileImg from '../../../../assets/images/profile/Ellipse 30.svg'
3+
import ProfileHeadeDetails from './ProfileHeadeDetails'
4+
5+
function ProfileHeader() {
6+
return (
7+
<>
8+
<div className='relative w-[488px] '>
9+
<img src={headerbg} alt='header' className='w-full'/>
10+
<img src={profileImg} alt='profile image' className='absolute bottom-0 z-10 left-1/2 -translate-x-1/2' />
11+
12+
</div>
13+
<ProfileHeadeDetails/>
14+
15+
</>
16+
)
17+
}
18+
19+
export default ProfileHeader

‎src/Components/Profile/UserProfile/ProfileHeader/ProfileNumbers.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
function ProfileNumbers() {
3+
const numbers=[
4+
{
5+
number:'400',
6+
text:'Following',
7+
},
8+
{
9+
number:'30k',
10+
text:'Followers'
11+
},
12+
{
13+
number:'100k',
14+
text:'Likes'
15+
}
16+
]
17+
return (
18+
<div className="flex text-center mt-5 gap-20 items-center justify-center">
19+
{numbers.map(({number,text},id)=><div key={id}>
20+
<span className="text-base font-bold mb-1">{number}</span>
21+
<p className="text-base text-[rgba(133,133,133,1)] font-medium">{text}</p>
22+
</div>)}
23+
</div>
24+
)
25+
}
26+
27+
export default ProfileNumbers

‎src/Components/Profile/UserProfile/ProfileHeader/ProfileOptions.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import chat from '../../../../assets/images/profile/message.svg'
2+
import share from '../../../../assets/images/profile/share.svg'
3+
4+
function ProfileOptions() {
5+
const style='bg-[rgba(251,249,247,1)] border-[1px] element-center w-11 rounded-full h-11 border-primary hover:bg-primary transition-all duration-300'
6+
return (
7+
<div className='flex items-center gap-4 justify-center'>
8+
<button className={style}><img src={chat} alt='chat'/></button>
9+
<button className='btn rounded-full text-base font-medium'>Follow</button>
10+
<button className={style}><img src={share} alt='share'/></button>
11+
</div>
12+
)
13+
}
14+
15+
export default ProfileOptions

‎src/Components/Profile/UserProfile/UserProfile.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ProfileHeader from "./ProfileHeader/ProfileHeader"
2+
3+
function UserProfile() {
4+
return (
5+
<div className="w-1/3">
6+
<ProfileHeader/>
7+
</div>
8+
)
9+
}
10+
11+
export default UserProfile

‎src/Pages/Profile/Profile.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import {useDispatch} from 'react-redux'
2+
import ProfileSideBar from '../../Components/Profile/SideBar/ProfileSideBar'
23
import RequireAuth from '../../Protected/RequireAuth'
4+
import {Outlet} from 'react-router-dom'
35
import { logOut } from '../../store/user/logOutAction'
46
function Profile() {
57
const dispatch=useDispatch()
68
return (
79
<RequireAuth>
8-
<button onClick={()=>dispatch(logOut())}>logout</button>
10+
<div className='flex'>
11+
<ProfileSideBar></ProfileSideBar>
12+
<Outlet/>
13+
14+
</div>
915
</RequireAuth>
1016
)
1117
}

‎src/assets/images/profile/Ellipse 30.svg

Lines changed: 9 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)