Skip to content

Commit 362f5f8

Browse files
author
Adithya Thejas
committed
login and register page
1 parent a24d7b5 commit 362f5f8

File tree

9 files changed

+428
-13
lines changed

9 files changed

+428
-13
lines changed

‎src/App.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import React from "react"
22
import Home from "./pages/home/Home.jsx";
3+
// import Profile from "./pages/profile/Profile.jsx";
4+
// import Login from "./pages/login/Login.jsx";
5+
// import Register from "./pages/register/Register.jsx";
36

47
function App() {
58
return <Home/>

‎src/components/rightbar/Rightbar.jsx

Lines changed: 74 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,88 @@
11
import React from 'react'
22
import './rightbar.css'
3-
import {Users} from "../../dummyData"
3+
import { Users } from "../../dummyData"
44
import Online from '../online/Online'
55

6-
export default function Rightbar() {
7-
return(
8-
<div className='rightbar'>
9-
<div className="rightbarWrapper">
6+
export default function Rightbar({ profile }) {
7+
8+
const HomeRightbar = () => {
9+
return (
10+
<>
1011
<div className="birthdayContainer">
1112
<img className='birthdayImg' src="assets/gift.png" alt="" />
1213
<span className="birthdayText">
1314
<b>Pola foster</b> and <b>3 others</b> have a birthday today.
1415
</span>
1516
</div>
16-
<img className='rignhtbarAd' src="assets/ad.png" alt="" />
17-
<h4 className="rightbarTitle">Online Friends</h4>
18-
<ul className="rightbarfriendList">
19-
{Users.map(u=>(
20-
<Online key={u.id} user={u}/>
21-
))}
22-
23-
</ul>
17+
<img className='rignhtbarAd' src="assets/ad.png" alt="" />
18+
<h4 className="rightbarTitle">Online Friends</h4>
19+
<ul className="rightbarfriendList">
20+
{Users.map(u => (
21+
<Online key={u.id} user={u} />
22+
))}
23+
24+
</ul>
25+
</>
26+
)
27+
}
28+
29+
const ProfileRightbar = () => {
30+
return (
31+
<>
32+
<h4 className='rightbarTitle'>User information</h4>
33+
<div className="rightbarInfo">
34+
<div className="rightbarInfoItem">
35+
<span className="rightbarInfoKey">City:</span>
36+
<span className="rightbarInfoValue">New York</span>
37+
</div>
38+
<div className="rightbarInfoItem">
39+
<span className="rightbarInfoKey">From:</span>
40+
<span className="rightbarInfoValue">Kerala</span>
41+
</div>
42+
<div className="rightbarInfoItem">
43+
<span className="rightbarInfoKey">Relationship:</span>
44+
<span className="rightbarInfoValue">Single</span>
45+
</div>
46+
</div>
47+
<h4 className='rightbarTitle'>User friends</h4>
48+
<div className="rightbarFollowings">
49+
<div className="rightbarFollowing">
50+
<img src="assets/persons/5.jpg" alt="" className="rightbarFollowingImg" />
51+
<span className="rightbarFollowingname">Emily Carter</span>
52+
</div>
53+
<div className="rightbarFollowing">
54+
<img src="assets/persons/6.jpg" alt="" className="rightbarFollowingImg" />
55+
<span className="rightbarFollowingname">John Carter</span>
56+
</div>
57+
<div className="rightbarFollowing">
58+
<img src="assets/persons/7.jpg" alt="" className="rightbarFollowingImg" />
59+
<span className="rightbarFollowingname">Sasha banks</span>
60+
</div>
61+
<div className="rightbarFollowing">
62+
<img src="assets/persons/8.jpg" alt="" className="rightbarFollowingImg" />
63+
<span className="rightbarFollowingname">Nicole Lucy</span>
64+
</div>
65+
<div className="rightbarFollowing">
66+
<img src="assets/persons/9.jpg" alt="" className="rightbarFollowingImg" />
67+
<span className="rightbarFollowingname">Laurel Porter</span>
68+
</div>
69+
<div className="rightbarFollowing">
70+
<img src="assets/persons/5.jpg" alt="" className="rightbarFollowingImg" />
71+
<span className="rightbarFollowingname">Charles Dickson</span>
72+
</div>
73+
<div className="rightbarFollowing">
74+
<img src="assets/persons/6.jpg" alt="" className="rightbarFollowingImg" />
75+
<span className="rightbarFollowingname">Johnathan Carter</span>
76+
</div>
2477
</div>
78+
</>
79+
)
80+
}
81+
return (
82+
<div className='rightbar'>
83+
<div className="rightbarWrapper">
84+
{profile ? <ProfileRightbar /> : <HomeRightbar/> }
2585
</div>
86+
</div>
2687
)
2788
}

‎src/components/rightbar/rightbar.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,46 @@
4141

4242
}
4343

44+
.rightbarTitle {
45+
font-size: 18px;
46+
font-weight: 500;
47+
margin-bottom: 10px;
48+
}
49+
50+
.rightbarInfo {
51+
margin-bottom: 30px;
52+
}
53+
54+
.rightbarInfoKey {
55+
font-weight: 500;
56+
margin-right: 15px;
57+
color: #555;
58+
}
59+
60+
.rightbarInfoValue {
61+
font-weight: 300;
62+
}
63+
64+
.rightbarInfoItem {
65+
margin-bottom: 10px;
66+
}
67+
68+
.rightbarFollowings {
69+
display: flex;
70+
flex-wrap: wrap;
71+
justify-content: space-between;
72+
}
73+
74+
.rightbarFollowing {
75+
display: flex;
76+
flex-direction: column;
77+
margin-bottom: 20px;
78+
cursor: pointer;
79+
}
80+
81+
.rightbarFollowingImg {
82+
width: 100px;
83+
height: 100px;
84+
border-radius: 5px;
85+
object-fit: cover;
86+
}

‎src/pages/login/Login.jsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react'
2+
import "./login.css"
3+
4+
export default function Login() {
5+
return (
6+
<div className='login'>
7+
<div className="loginWrapper">
8+
<div className="loginLeft">
9+
<h3 className="loginLogo">NewSocial</h3>
10+
<span className="loginDesc">
11+
Connect with friends and the world around you on NewSocial
12+
</span>
13+
</div>
14+
<div className="loginRight">
15+
<div className="loginBox">
16+
<input placeholder='Email' className="loginInput" />
17+
<input placeholder='Password' className="loginInput" />
18+
<button className="loginButton">Log In</button>
19+
<span className="loginForgot">Forgot Password?</span>
20+
<button className='loginRgisterButton'>
21+
Create a new Account
22+
</button>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
)
28+
}

‎src/pages/login/login.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.login {
2+
width: 100vw;
3+
height: 100vh;
4+
background-color: #f0f2f5;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
}
9+
10+
.loginWrapper {
11+
width: 70%;
12+
height: 70%;
13+
display: flex;
14+
}
15+
16+
.loginLeft , .loginRight {
17+
flex: 1;
18+
display: flex;
19+
flex-direction: column;
20+
justify-content: center;
21+
}
22+
23+
.loginLogo {
24+
font-size: 50px;
25+
font-weight: 800;
26+
color: #1775ee;
27+
margin-bottom: 10px;
28+
}
29+
30+
.loginDesc {
31+
font-size: 24px;
32+
}
33+
34+
.loginBox {
35+
height: 300px;
36+
padding: 20px;
37+
background-color: white;
38+
border-radius: 10px;
39+
display: flex;
40+
flex-direction: column;
41+
justify-content: space-between;
42+
}
43+
44+
.loginInput {
45+
height: 50px;
46+
border-radius: 10px;
47+
border: 1px solid gray;
48+
font-size: 18px;
49+
padding-left: 20px;
50+
}
51+
52+
.loginInput:focus {
53+
outline: none;
54+
}
55+
56+
.loginButton {
57+
height: 50px;
58+
border-radius: 10px;
59+
border: none;
60+
background-color: #1775ee;
61+
color: white;
62+
font-size: 20px;
63+
font-weight: 500;
64+
cursor: pointer;
65+
}
66+
67+
.loginForgot {
68+
text-align: center;
69+
color: #1775ee;
70+
}
71+
72+
.loginRgisterButton {
73+
width: 60%;
74+
align-self: center;
75+
height: 50px;
76+
border-radius: 10px;
77+
border: none;
78+
background-color: #42b72a;
79+
color: white;
80+
font-size: 20px;
81+
font-weight: 500;
82+
cursor: pointer;
83+
}
84+

‎src/pages/profile/Profile.jsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
import "./profile.css"
3+
import Topbar from "../../components/topbar/Topbar.jsx";
4+
import Sidebar from "../../components/sidebar/Sidebar.jsx";
5+
import Feed from "../../components/feed/Feed.jsx";
6+
import Rightbar from "../../components/rightbar/Rightbar.jsx";
7+
8+
export default function Profile() {
9+
return (
10+
<>
11+
<Topbar />
12+
<div className="profile">
13+
<Sidebar />
14+
<div className="profileRight">
15+
<div className="profilerightTop">
16+
<div className="profileCover">
17+
<img className='profileCoverImg' src="assets/post/3.jpg" alt="" />
18+
<img className='profileUserImg' src="assets/persons/4.jpg" alt="" />
19+
</div>
20+
<div className="profileInfo">
21+
<h4 className='profileInfoName'>Stephen Myburgh</h4>
22+
<span className='profileInfoDesc'>Hello my friends</span>
23+
</div>
24+
</div>
25+
<div className="profilerightBottom">
26+
<Feed />
27+
<Rightbar profile/>
28+
</div>
29+
</div>
30+
</div>
31+
</>
32+
)
33+
}

‎src/pages/profile/profile.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.profile {
2+
display: flex;
3+
}
4+
5+
.profileRight {
6+
flex: 9;
7+
}
8+
9+
.profileCover {
10+
height: 320px;
11+
position: relative;
12+
}
13+
14+
.profileCoverImg {
15+
width: 100%;
16+
height: 250px;
17+
object-fit: cover;
18+
}
19+
20+
.profileUserImg {
21+
width: 150px;
22+
height: 150px;
23+
border-radius: 50%;
24+
object-fit: cover;
25+
position: absolute;
26+
left: 0;
27+
right: 0;
28+
margin: auto;
29+
top: 150px;
30+
border: 3px solid white;
31+
}
32+
33+
.profileInfo {
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
justify-content: center;
38+
}
39+
40+
.profileInfoName {
41+
font-size: 24px;
42+
}
43+
44+
.profileInfoDesc {
45+
font-weight: 300;
46+
}
47+
48+
.profilerightBottom {
49+
display: flex;
50+
}

‎src/pages/register/Register.jsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
import "./register.css"
3+
4+
export default function Register() {
5+
return (
6+
<div className='login'>
7+
<div className="loginWrapper">
8+
<div className="loginLeft">
9+
<h3 className="loginLogo">NewSocial</h3>
10+
<span className="loginDesc">
11+
Connect with friends and the world around you on NewSocial
12+
</span>
13+
</div>
14+
<div className="loginRight">
15+
<div className="loginBox">
16+
<input placeholder='Username' className="loginInput" />
17+
<input placeholder='Email' className="loginInput" />
18+
<input placeholder='Password' className="loginInput" />
19+
<input placeholder='Password Again' className="loginInput" />
20+
<button className="loginButton">Sign up</button>
21+
<button className='loginRgisterButton'>
22+
Log into account
23+
</button>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
)
29+
}

0 commit comments

Comments
 (0)