Skip to content

Commit 852f259

Browse files
rohit-56rohit-56
authored
Merge pull request #11 from rohit-56/user-profile
User profile
2 parents c67e26a + 77af3e2 commit 852f259

File tree

13 files changed

+207
-101
lines changed

13 files changed

+207
-101
lines changed

‎package-lock.json

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"jodit-react": "^4.0.15",
1515
"react": "^18.2.0",
1616
"react-dom": "^18.2.0",
17+
"react-icons": "^5.0.1",
1718
"react-router-dom": "^6.16.0",
1819
"react-scripts": "^5.0.1",
1920
"reactstrap": "^9.2.2",

‎src/App.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import UserHome from "./components/user/UserHome";
88
import Home from "./pages/Home";
99
import AddPost from "./components/user/AddPost";
1010
import Feed from "./components/user/Feed";
11+
import ProfileInfo from "./components/user/ProfileInfo";
1112

1213
const App = () => {
1314
return (
@@ -21,6 +22,7 @@ const App = () => {
2122
<Route path="dashboard" element={<Home />} />
2223
<Route path="addpost" element={<AddPost />} />
2324
<Route path="home" element={<Home />} />
25+
<Route path="user-profile" element={<ProfileInfo />} />
2426
</Route>
2527
</Routes>
2628
);

‎src/components/BlogNavbar.jsx

+108-70
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect, useState } from "react";
22
import "bootstrap/dist/css/bootstrap.min.css";
3+
import { FaSearch } from "react-icons/fa";
34
import {
45
Collapse,
56
Navbar,
@@ -40,82 +41,119 @@ const BlogNavbar = () => {
4041
}, [userIn]);
4142

4243
return (
43-
<div>
44-
<Navbar color="info" dark expand="md">
45-
<NavbarBrand tag={ReactNavLink} to="/">
46-
MyBlog
47-
</NavbarBrand>
48-
<NavbarToggler onClick={toggle} />
49-
<Collapse isOpen={isOpen} navbar>
50-
{userIn && (
51-
<>
52-
<Nav className="mx-2" navbar>
53-
<NavItem>
54-
<NavLink tag={ReactNavLink} to="/user/home">
55-
Home
56-
</NavLink>
57-
</NavItem>
58-
</Nav>
59-
</>
60-
)}
61-
<Nav className="me-auto mx-2" navbar>
62-
<NavItem>
63-
<NavLink tag={ReactNavLink} to="/">
64-
Feeds
65-
</NavLink>
66-
</NavItem>
67-
68-
<UncontrolledDropdown nav inNavbar>
69-
<DropdownToggle nav caret>
70-
More
71-
</DropdownToggle>
72-
<DropdownMenu right>
73-
<DropdownItem>Services</DropdownItem>
74-
<DropdownItem divider />
75-
<DropdownItem>Contact Us</DropdownItem>
76-
<DropdownItem>Linkedln</DropdownItem>
77-
</DropdownMenu>
78-
</UncontrolledDropdown>
79-
</Nav>
80-
81-
{userIn && (
82-
<>
83-
<Nav className="mx-2" navbar>
84-
<NavLink
85-
tag={ReactNavLink}
86-
to="/user/addpost"
87-
style={{ cursor: "pointer", color: "white" }}
88-
>
89-
Write
90-
</NavLink>
44+
<Navbar
45+
expand="md"
46+
color="#ffffff"
47+
sticky="top"
48+
style={{
49+
backgroundColor: "#e35726",
50+
borderBottom: "1px solid #ffffff",
51+
color: "#ffffff !important",
52+
}}
53+
>
54+
<NavbarBrand tag={ReactNavLink} to="/" style={{ color: "#ffffff" }}>
55+
MyBlog
56+
</NavbarBrand>
57+
<NavbarToggler onClick={toggle} />
58+
<Collapse isOpen={isOpen} navbar>
59+
{userIn && (
60+
<>
61+
<Nav className="mx-2" navbar>
62+
<NavItem>
9163
<NavLink
9264
tag={ReactNavLink}
93-
to="/login"
94-
onClick={handleLogout}
95-
style={{ cursor: "pointer", color: "white" }}
65+
to="/user/home"
66+
style={{ color: "#ffffff" }}
9667
>
97-
Logout
68+
Home
9869
</NavLink>
99-
</Nav>
100-
</>
101-
)}
70+
</NavItem>
71+
</Nav>
72+
</>
73+
)}
74+
<Nav className="me-auto mx-2" navbar>
75+
<NavItem>
76+
<NavLink tag={ReactNavLink} to="/" style={{ color: "#ffffff" }}>
77+
Feeds
78+
</NavLink>
79+
</NavItem>
80+
<NavItem
81+
className="mt-1 mx-3"
82+
style={{ backgroundColor: "#ffffff", borderRadius: "50px" }}
83+
>
84+
<FaSearch className="search-icon mx-1" style={{ color: "grey" }} />
85+
<input
86+
className="p-1"
87+
type="text"
88+
placeholder="Search By Category"
89+
style={{
90+
backgroundColor: "#ffffff",
91+
border: "none",
92+
borderRadius: "50px",
93+
outline: "none",
94+
}}
95+
></input>
96+
</NavItem>
97+
</Nav>
10298

103-
{!userIn && (
104-
<>
105-
<Nav navbar>
106-
<NavLink tag={ReactNavLink} to="/login">
107-
Login
108-
</NavLink>
99+
{userIn && (
100+
<>
101+
<Nav className="mx-2" navbar>
102+
<NavLink
103+
tag={ReactNavLink}
104+
to="/user/addpost"
105+
style={{ cursor: "pointer", color: "#ffffff" }}
106+
>
107+
Write
108+
</NavLink>
109+
<NavLink
110+
tag={ReactNavLink}
111+
to="/login"
112+
onClick={handleLogout}
113+
style={{ cursor: "pointer", color: "#ffffff" }}
114+
>
115+
Logout
116+
</NavLink>
117+
<UncontrolledDropdown nav inNavbar>
118+
<DropdownToggle nav caret style={{ color: "#ffffff" }}>
119+
More
120+
</DropdownToggle>
121+
<DropdownMenu right>
122+
<DropdownItem tag={ReactNavLink} to="/user/user-profile">
123+
Profile
124+
</DropdownItem>
125+
<DropdownItem divider />
126+
<DropdownItem>Contact Us</DropdownItem>
127+
<DropdownItem>Linkedln</DropdownItem>
128+
</DropdownMenu>
129+
</UncontrolledDropdown>
130+
</Nav>
131+
</>
132+
)}
109133

110-
<NavLink tag={ReactNavLink} to="/signup">
111-
Signup
112-
</NavLink>
113-
</Nav>
114-
</>
115-
)}
116-
</Collapse>
117-
</Navbar>
118-
</div>
134+
{!userIn && (
135+
<>
136+
<Nav navbar>
137+
<NavLink
138+
tag={ReactNavLink}
139+
to="/login"
140+
style={{ color: "#ffffff" }}
141+
>
142+
Login
143+
</NavLink>
144+
145+
<NavLink
146+
tag={ReactNavLink}
147+
to="/signup"
148+
style={{ color: "#ffffff" }}
149+
>
150+
Signup
151+
</NavLink>
152+
</Nav>
153+
</>
154+
)}
155+
</Collapse>
156+
</Navbar>
119157
);
120158
};
121159

‎src/components/Home/BlogList/BlogItem/index.jsx

+14-8
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,29 @@ const BlogItem = ({
1414
authorAvatar,
1515
createdAt,
1616
cover,
17+
defaultDataflag,
1718
},
1819
}) => {
1920
return (
20-
<div className="blogItem-wrap">
21-
<img
22-
className="blogItem-cover"
23-
src={`data:image/png;base64,${cover}`}
24-
alt="cover"
25-
/>
21+
<div className="blogItem-wrap shadow p-3 mb-5 bg-white rounded">
22+
{defaultDataflag ? (
23+
<img className="blogItem-cover" src={`${cover}`} alt="cover" />
24+
) : (
25+
<img
26+
className="blogItem-cover"
27+
src={`data:image/png;base64,${cover}`}
28+
alt="cover"
29+
/>
30+
)}
31+
2632
<Chip label={category} />
2733
<h3>{title}</h3>
2834
<p
2935
className="blogItem-desc"
3036
dangerouslySetInnerHTML={{ __html: content }}
3137
></p>
32-
<footer>
33-
<div className="blogItem-author">
38+
<footer style={{ borderTop: "1px solid grey", padding: "1px" }}>
39+
<div className="blogItem-author mt-1">
3440
<img src="/assets/images/author.jpg" alt="avatar" />
3541
<div>
3642
<h6>{authorName}</h6>

‎src/components/Home/BlogList/BlogItem/styles.css

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
width: 100%;
77
height: 250px;
88
object-fit: cover;
9-
border-radius: 20px;
109
margin-bottom: 0.5rem;
1110
}
1211
.blogItem-wrap h3 {

‎src/components/user/AddPost.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,9 @@ const AddPost = () => {
7979

8080
return (
8181
<Base>
82-
<Container>
82+
<Container
83+
style={{ border: "2px", borderStyle: "solid", borderRadius: "2px" }}
84+
>
8385
<Form onSubmit={(event) => submitPostForm(event)}>
8486
<FormGroup tag="h2">
8587
<Label for="header">What going on your mind ?</Label>

‎src/components/user/Feed.jsx

-8
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,6 @@ const Feed = () => {
4646
{/* Header Component */}
4747
<Header />
4848

49-
{/* Search Bar Component */}
50-
<SearchBar
51-
value={searchKey}
52-
clearSearch={clearSearchBar}
53-
handleSearchKey={(e) => setSearchKey(e.target.value)}
54-
formSubmit={handleSearchSubmit}
55-
/>
56-
5749
{/* Blog List Component */}
5850
<BlogList blogs={blogs} />
5951
</Container>

‎src/components/user/profileinfo.jsx

+55-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,64 @@
11
import React from "react";
22
import Base from "../Base";
3+
import {
4+
Card,
5+
CardBody,
6+
CardTitle,
7+
CardSubtitle,
8+
Button,
9+
CardText,
10+
Container,
11+
Label,
12+
Row,
13+
Col,
14+
} from "reactstrap";
315

416
const ProfileInfo = () => {
517
return (
618
<Base>
7-
<div>ProfileInfo</div>
19+
<Container className="mt-2">
20+
<Label tag={"h2"} className="text-center">
21+
User Information
22+
</Label>
23+
<Container
24+
style={{
25+
display: "flex",
26+
justifyContent: "center",
27+
borderRadius: "10px",
28+
}}
29+
>
30+
<Card className="mt-2 shadow-lg p-3 mb-5 bg-white rounded">
31+
<CardBody>
32+
<Row>
33+
<Col>
34+
<Container>
35+
<img alt="Sample" src="https://picsum.photos/300/200" />
36+
</Container>
37+
</Col>
38+
<Col>
39+
<Container>
40+
<CardTitle tag={"h3"}>Username</CardTitle>
41+
<CardSubtitle tag={"h6"}>[email protected]</CardSubtitle>
42+
<CardText className="my-2" tag={"h5"}>
43+
About
44+
</CardText>
45+
<CardText
46+
style={{
47+
background: "#E5E4E2",
48+
height: "80px",
49+
width: "400px",
50+
}}
51+
>
52+
I am Developer
53+
</CardText>
54+
<Button color="primary">Edit Profile</Button>
55+
</Container>
56+
</Col>
57+
</Row>
58+
</CardBody>
59+
</Card>
60+
</Container>
61+
</Container>
862
</Base>
963
);
1064
};

0 commit comments

Comments
 (0)