From fbcf53d5d112b3befd054b8ed931c34c7b2dc22f Mon Sep 17 00:00:00 2001 From: rockyeverlast Date: Mon, 27 May 2024 13:54:30 +0530 Subject: [PATCH] Added react Share to blogs and Articles page --- package-lock.json | 34 ++++++++++++++ package.json | 1 + src/components/ArticlePage/ArticlePage.jsx | 37 +++++++++++----- src/components/BlogPost/BlogPost.jsx | 44 ++++++++++++++----- src/components/Card/HomeCard.jsx | 2 +- src/components/NavBar/NavBar.jsx | 2 +- .../tabInsideContent/WhitepaperDocs.jsx | 2 +- .../VideoInternal/VideoInternal.jsx | 12 ++--- 8 files changed, 104 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 27640cd..52acc68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "react-phone-input-2": "^2.15.1", "react-redux": "^9.1.1", "react-router-dom": "^6.22.3", + "react-share": "^5.1.0", "swiper": "^11.1.0" }, "devDependencies": { @@ -7267,6 +7268,27 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/jsonp": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz", + "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==", + "dependencies": { + "debug": "^2.1.3" + } + }, + "node_modules/jsonp/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/jsonp/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", @@ -8713,6 +8735,18 @@ "react-dom": ">=16.8" } }, + "node_modules/react-share": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-share/-/react-share-5.1.0.tgz", + "integrity": "sha512-OvyfMtj/0UzH1wi90OdHhZVJ6WUC/+IeWvBwppeZozwIGyAjQgyR0QXlHOrxVHVECqnGvcpBaFTXVrqouTieaw==", + "dependencies": { + "classnames": "^2.3.2", + "jsonp": "^0.2.1" + }, + "peerDependencies": { + "react": "^17 || ^18" + } + }, "node_modules/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", diff --git a/package.json b/package.json index a45f805..776c8a8 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "react-phone-input-2": "^2.15.1", "react-redux": "^9.1.1", "react-router-dom": "^6.22.3", + "react-share": "^5.1.0", "swiper": "^11.1.0" }, "devDependencies": { diff --git a/src/components/ArticlePage/ArticlePage.jsx b/src/components/ArticlePage/ArticlePage.jsx index 64c2a0a..f3fcc17 100644 --- a/src/components/ArticlePage/ArticlePage.jsx +++ b/src/components/ArticlePage/ArticlePage.jsx @@ -1,6 +1,13 @@ /* eslint-disable no-unused-vars */ import React, { useEffect } from "react"; import { Box, Text, Image } from "@chakra-ui/react"; +import { + FacebookShareButton, + TwitterShareButton, + LinkedinShareButton, + WhatsappShareButton, + TelegramShareButton, +} from "react-share"; import { Avatar, AvatarBadge, AvatarGroup } from "@chakra-ui/react"; import Chip from "../Chip/Chip"; import Footer from "../Footer/Footer"; @@ -220,6 +227,7 @@ const ArticlePage = () => { { }, }} > - + - - + + - - + + - - + - + { ? blogPosts.find((item) => item.title_slug === title_slug) : null; - // console.log(matchingBlogPost); + console.log(matchingBlogPost); // console.log(matchingBlogPost.content); return ( @@ -224,6 +236,7 @@ const BlogPost = () => { { }, }} > - + - - + + - - + + - - + - + { src={`https://rubix.betadelivery.com/${card.content_image_large}`} /> - {blogCards.tags.map((tag, index) => ( + {blogCards?.tags?.map((tag, index) => ( ))} diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index f58a1cc..578de9b 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -654,7 +654,7 @@ const NavBar = () => { marginBottom={"1rem"} > - News & Articles + News diff --git a/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx b/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx index ae05899..86e82c1 100644 --- a/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx +++ b/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx @@ -69,7 +69,7 @@ const WhitepaperDocs = () => { src={`https://rubix.betadelivery.com/${item.bannerImage}`} maxHeight={"215px"} width={"100%"} - objectFit={"cover"} + objectFit={"contain"} objectPosition={"center"} /> diff --git a/src/components/VideoInternal/VideoInternal.jsx b/src/components/VideoInternal/VideoInternal.jsx index f6cb3ae..258ba5a 100644 --- a/src/components/VideoInternal/VideoInternal.jsx +++ b/src/components/VideoInternal/VideoInternal.jsx @@ -59,7 +59,7 @@ const VideoInternal = () => { return ( <> { }, }} > - {matchingvideos.title} + {matchingvideos?.title} { }, }} > - Video duration : {matchingvideos.duration} min + Video duration : {matchingvideos?.duration} min { }, }} > - {matchingvideos.description} + {matchingvideos?.description} @@ -161,7 +161,7 @@ const VideoInternal = () => { }} >