Share gudie widget on the sidebar

components/share-guide/index.js

@@ -1,14 +1,32 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFacebookSquare, faRedditSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
 
+import { getFacebookShareUrl, getRedditShareUrl, getTwitterShareUrl } from "lib/url";
 import { ShareIcon, ShareIconsList, ShareWrap } from './style';
 
-const ShareGuide = (props) => (
+const ShareGuide = ({
+  guide,
+  guide: {
+    author = {}
+  } = {}
+}) => (
   <ShareWrap>
     <ShareIconsList className="d-sm-none d-md-none d-lg-flex d-xl-flex">
-      <ShareIcon><a href="#"><FontAwesomeIcon icon={ faTwitterSquare } /></a></ShareIcon>
+      <ShareIcon>
-      <ShareIcon><a href="#"><FontAwesomeIcon icon={ faFacebookSquare } /></a></ShareIcon>
+        <a href={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank">
-      <ShareIcon><a href="#"><FontAwesomeIcon icon={ faRedditSquare } /></a></ShareIcon>
+          <FontAwesomeIcon icon={ faTwitterSquare } />
+        </a>
+      </ShareIcon>
+      <ShareIcon>
+        <a href={ getFacebookShareUrl({ text: guide.title, url: guide.url }) } target="_blank">
+          <FontAwesomeIcon icon={ faFacebookSquare } />
+        </a>
+      </ShareIcon>
+      <ShareIcon>
+        <a href={ getRedditShareUrl({ text: guide.title, url: guide.url })} target="_blank">
+          <FontAwesomeIcon icon={ faRedditSquare } />
+        </a>
+      </ShareIcon>
     </ShareIconsList>
   </ShareWrap>
 );

pages/guides/[guide].js

@@ -14,12 +14,12 @@ const Guide = ({ guide }) => {
 
   return (
     <GuideLayout>
-      <GuideHeader guide={guide} />
+      <GuideHeader guide={ guide } />
       <GuideBody>
         <guide.component />
-        <ShareGuide/>
+        <ShareGuide guide={ guide }/>
       </GuideBody>
-      <GuideFooter guide={guide} />
+      <GuideFooter guide={ guide } />
     </GuideLayout>
   );
 };