added blog previews

Author: rutikwankhade

src/components/App.css

@@ -0,0 +1,7 @@
+.container{
+    display:flex;
+    flex-direction:row;
+    flex-wrap:wrap;
+    max-width:900px;
+    margin:auto;
+}

src/components/App.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import './App.css';
+import BlogPosts from './BlogPosts'
 
 function App() {
   return (
     <div>
-      hi
+      <BlogPosts/>
     </div>
   );
 }

src/components/BlogPosts.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import Post from './Post';
+import './App.css';
+
+const query = `
+    {
+      user(username: "rutikwankhade") {
+        publication {
+          posts{
+            slug
+            title
+            brief
+            coverImage
+          }
+        }
+      }
+    }
+  `;
+
+class Blogposts extends React.Component {
+    state = {
+        posts: []
+    };
+
+    componentDidMount() {
+        this.fetchPosts();
+    }
+
+    fetchPosts = async () => {
+        const response = await fetch('https://api.hashnode.com', {
+            method: 'POST',
+            headers: {
+                'Content-type': 'application/json',
+            },
+            body: JSON.stringify({ query }),
+        })
+        const ApiResponse = await response.json();
+
+        console.log(ApiResponse.data.user.publication.posts);
+        this.setState({ posts: ApiResponse.data.user.publication.posts});
+
+
+    };
+
+    render() {
+        return (
+            <div class="container">
+                {this.state.posts.map((post, index) => (
+                   <a key={index} href={`https://blog.rutikwankhade.dev/${post.slug}`} >
+                       <Post post={post}/>
+                    </a>
+                ))}
+            </div>
+        );
+    }
+}
+
+
+export default Blogposts;

src/components/Post.css

@@ -0,0 +1,26 @@
+.card{
+    height:auto;
+    width:350px;
+    padding:20px;
+    font-family:segoe ui;
+    border:solid 2px #f2f2f2;
+    text-align: inherit;
+    margin:20px;
+    background-color: #ffffff;
+    box-shadow:2px 2px 4px #f2f2f2;
+    border-radius:8px;
+}
+p{color:#333333;}
+
+h2{
+    font-weight:600;
+}
+img{
+    
+    width:inherit;
+    height:inherit;
+    border-radius:5px;
+}
+
+a{text-decoration: none;
+color:#1d1d1d;}

src/components/Post.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Post.css'
+const Post = ({ post }) => {
+    return (
+        <div className="card">
+            <img src={post.coverImage} alt={post.title}/>
+            <h2>{post.title}</h2>
+            <p>{post.brief}</p>
+        </div>
+    )
+}
+
+export default Post;