Skip to content

Commit 3c32523

Browse files
rutikwankhaderutikwankhade
committed
style: added navbar and spinner
1 parent c0ecfa2 commit 3c32523

File tree

9 files changed

+109
-37
lines changed

9 files changed

+109
-37
lines changed

‎package-lock.json

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

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"@testing-library/user-event": "^7.2.1",
99
"react": "^16.13.1",
1010
"react-dom": "^16.13.1",
11-
"react-scripts": "3.4.3"
11+
"react-scripts": "3.4.3",
12+
"svg-loaders-react": "^2.2.1"
1213
},
1314
"scripts": {
1415
"start": "react-scripts start",

‎public/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
18+
1719
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1820
<!--
1921
Notice the use of %PUBLIC_URL% in the tags above.
@@ -24,7 +26,7 @@
2426
work correctly both with client-side routing and a non-root public URL.
2527
Learn how to configure a non-root public URL by running `npm run build`.
2628
-->
27-
<title>React App</title>
29+
<title>API-hashnode</title>
2830
</head>
2931
<body>
3032
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/components/App.css

+61
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,64 @@
55
max-width:900px;
66
margin:auto;
77
}
8+
9+
.spinner{
10+
margin:auto;
11+
justify-content:center;
12+
text-align:center;
13+
padding-top:250px;
14+
}
15+
16+
.nav{
17+
color: #344051;
18+
font-family:segoe ui;
19+
display:flex;
20+
flex-direction: row;
21+
max-width: 750px;
22+
margin:auto;
23+
padding:10px 20px 0px 20px;
24+
text-align: center;
25+
26+
}
27+
.icons{
28+
margin-top:15px;
29+
margin-left:auto;
30+
margin-right:0px;
31+
32+
}
33+
i{
34+
color:#444e67;
35+
margin:5px;;
36+
37+
}
38+
39+
.card{
40+
height:auto;
41+
width:350px;
42+
padding:20px;
43+
font-family:segoe ui;
44+
border:solid 2px #f2f2f2;
45+
text-align: inherit;
46+
margin:20px;
47+
background-color: #ffffff;
48+
box-shadow:2px 2px 4px #f2f2f2;
49+
border-radius:8px;
50+
}
51+
p{
52+
color:#333333;
53+
}
54+
55+
h2{
56+
font-weight:600;
57+
}
58+
img{
59+
60+
width:inherit;
61+
height:inherit;
62+
border-radius:5px;
63+
}
64+
65+
a{
66+
text-decoration: none;
67+
color:#1d1d1d;
68+
}

‎src/components/App.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react';
22
import './App.css';
3-
import BlogPosts from './BlogPosts'
3+
import BlogPosts from './BlogPosts';
4+
import NavBar from './NavBar';
45

56
function App() {
67
return (
78
<div>
8-
<BlogPosts/>
9+
<NavBar />
10+
<BlogPosts />
911
</div>
1012
);
1113
}

‎src/components/BlogPosts.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
22
import Post from './Post';
33
import './App.css';
4+
import { ThreeDots } from 'svg-loaders-react'
5+
46

57
const query = `
68
{
@@ -19,7 +21,8 @@ const query = `
1921

2022
class Blogposts extends React.Component {
2123
state = {
22-
posts: []
24+
posts: [],
25+
loading: true
2326
};
2427

2528
componentDidMount() {
@@ -37,23 +40,25 @@ class Blogposts extends React.Component {
3740
const ApiResponse = await response.json();
3841

3942
console.log(ApiResponse.data.user.publication.posts);
40-
this.setState({ posts: ApiResponse.data.user.publication.posts});
43+
this.setState({ posts: ApiResponse.data.user.publication.posts, loading: false });
4144

4245

4346
};
4447

4548
render() {
49+
50+
if (this.state.loading) return <div className="spinner"><ThreeDots fill="#e1bafd" trokeOpacity=".125" /></div>;
51+
4652
return (
4753
<div class="container">
4854
{this.state.posts.map((post, index) => (
49-
<a key={index} href={`https://blog.rutikwankhade.dev/${post.slug}`} >
50-
<Post post={post}/>
55+
<a key={index} href={`https://blog.rutikwankhade.dev/${post.slug}`} >
56+
<Post post={post} />
5157
</a>
5258
))}
5359
</div>
5460
);
5561
}
5662
}
5763

58-
5964
export default Blogposts;

‎src/components/NavBar.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import './App.css';
3+
4+
const NavBar = () => {
5+
6+
return (
7+
<div className="nav">
8+
<h2> Rutik Wankhade</h2>
9+
<div className="icons">
10+
<a href="https://github.com/rutikwankhade/API-hashnode">
11+
<i class="fa fa-2x fa-github-alt" aria-hidden="true"></i>
12+
</a>
13+
<a href="https://github.com/rutikwankhade/API-hashnode">
14+
<i class="fa fa-2x fa-twitter" aria-hidden="true"></i>
15+
</a>
16+
</div>
17+
</div>
18+
);
19+
}
20+
21+
export default NavBar;

‎src/components/Post.css

-26
This file was deleted.

‎src/components/Post.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react';
2-
import './Post.css'
2+
import './App.css'
3+
34
const Post = ({ post }) => {
45
return (
56
<div className="card">
6-
<img src={post.coverImage} alt={post.title}/>
7+
<img src={post.coverImage} alt={post.title} />
78
<h2>{post.title}</h2>
89
<p>{post.brief}</p>
910
</div>

0 commit comments

Comments
 (0)