added some feature

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -12,6 +13,7 @@
     "react-dom": "^17.0.2",
     "react-query": "^3.16.0",
     "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

src/assets/css/article.scss

@@ -74,11 +74,14 @@ a {
       display: flex;
       justify-content: space-between;
       .author {
+        border-radius: 1000px;
+
         margin-top: 1rem;
-        border-radius: 0.1rem;
+        font-size: small;
         margin-left: 1rem;
-        padding: 0.2rem 0.4rem;
+        padding: 0.4rem 0.6rem;
         background: rgba(0, 0, 0, 0.4);
+        color: rgba(255, 255, 255, 0.3);
       }
       .shareButton {
         margin-top: 1rem;

src/commomComponets/Heading.js

@@ -1,6 +1,7 @@
 import React from "react";
 
-const Heading = () => {
+const Heading = ({title}) => {
+  document.title = title
   return (
     <>
       <div className="heading_arico">

src/components/Article.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined';
 
 const Article = ({
   img,
@@ -13,7 +14,7 @@ const Article = ({
     background: `linear-gradient(193deg,  ${determineColor},22%, #304569)`,
   };
   const share = async (e) => {
-    if (e.target.className === "shareButton") {
+
       if (navigator.canShare) {
         navigator
           .share({
@@ -29,12 +30,12 @@ const Article = ({
             alert("sharing capability  is not supported by this browser");
           });
       }
-    }
+
   };
 
   return (
     <>
-      <div className="card_body" style={bg} onClick={share}>
+      <div className="card_body" style={bg}>
         <Link to={`/${goto}`}>
           <div className="card_image">
             <img src="logo192.png" alt="article_image" />
@@ -48,8 +49,8 @@ const Article = ({
         </Link>
         <div className="author_share">
           <small className="author">{user}</small>
-          <small className="shareButton" id={goto} title={heading}>
-            Share
+          <small className="shareButton" id={goto} title={heading}  onClick={share}>
+     <ShareOutlinedIcon />
           </small>
         </div>
       </div>

src/helper/fetchData.js

@@ -5,7 +5,7 @@ import { useState, useEffect } from "react";
 export const fetchData = async () => {
   let _token = LocalStorage.getItem();
   config.headers["auth"] = _token;
-  let data = await axios.get("http://localhost:8000/api", config);
+  let data = await axios.get("http://localhost:8000/api?page=1", config);
   if (data.data?.code === -1) {
     console.log("not authorized");
   }