update share

Author: aleksandarilic-vegait

package-lock.json

@@ -16,6 +16,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "^5.0.1",
+    "react-share": "^5.2.2",
     "vite": "^5.1.4",
     "youtube-dl-exec": "^3.0.16",
     "youtube-transcript": "^1.2.1",

package.json

@@ -0,0 +1,14 @@
+.share-buttons {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 10px;
+}
+
+.share-buttons button {
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.share-buttons button:hover {
+  transform: scale(1.1);
+}

src/components/share/ShareButtons.css

@@ -0,0 +1,19 @@
+import React from 'react';
+import { LinkedinShareButton, LinkedinIcon } from 'react-share';
+
+type ShareButtonsProps = {
+  title: string;
+  url: string;
+};
+
+const ShareButtons: React.FC<ShareButtonsProps> = ({ title, url }) => {
+  return (
+    <div className="share-buttons">
+      <LinkedinShareButton url={url} title={title}>
+        <LinkedinIcon size={32} round />
+      </LinkedinShareButton>
+    </div>
+  );
+};
+
+export default ShareButtons;

src/components/share/ShareButtons.tsx

@@ -5,6 +5,8 @@ import Spinner from "../Spinner";
 import ErrorMessage from "../ErrorMessage";
 import { marked } from "marked";
 import TextToSpeech from "../TextToSpeech";
+import ShareButtons from "../share/ShareButtons";
+import "../share/ShareButtons.css";
 
 type TalkContentProps = {
   talk: TTalk;
@@ -49,7 +51,13 @@ export function TalkContent({ talk }: TalkContentProps) {
   return (
     <div className="talk-content">
       <header className="talk-content__header">
-        <h1 className="talk-content__title">{talk.title}</h1>
+        <div className="talk-content__title-container">
+          <h1 className="talk-content__title">{talk.title}</h1>
+          <ShareButtons
+            title={talk.title}
+            url={window.location.href}
+          />
+        </div>
         <div className="talk-content__category">{talk.category}</div>
         {content && <TextToSpeech text={plainTextContent} />}
       </header>

src/components/talk/TalkContent.tsx

@@ -781,6 +781,12 @@ ul li::before {
   border-bottom: 2px dashed var(--cozy-light-brown);
 }
 
+.talk-content__title-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
 .talk-content__title {
   margin: 0 0 10px 0;
   font-size: 2rem;