fix: ui and add shared in speakers info

src/components/Footer.tsx

@@ -81,7 +81,6 @@ const Footer = () => {
                     </small>
                     <a className="text-sm hover:text-posadev-brightPink"
                        onClick={() => {
-                           scrollToTop()
                            navigate("/privacy-policy")
                        }}>Politica de Privacidad</a>
                     <p className="text-posadev-lightPink text-sm flex gap-1 items-center">

src/components/Header.tsx

@@ -70,7 +70,6 @@ const Header = () => {
                         </a>
                         <a
                             onClick={() => {
-                                scrollToTop();
                                 navigate('/code-of-conduct')
                             }}
                             className={cn("text-white hover:text-posadev-brightPink transition-colors duration-300 flex items-center space-x-1", isActive('/code-of-conduct') && "text-posadev-brightPink")}>
@@ -114,7 +113,6 @@ const Header = () => {
                             </a>
                             <a
                                 onClick={() => {
-                                    scrollToTop()
                                     navigateMenu('/code-of-conduct')
                                 }}
                                 className={cn("text-white hover:text-posadev-brightPink transition-colors duration-300 flex items-center space-x-1", isActive('/code-of-conduct') && "text-posadev-brightPink")}>

src/components/Shared.tsx

@@ -0,0 +1,36 @@
+import {useToast} from "@/hooks/use-toast.ts";
+import {Share2} from "lucide-react";
+import React from "react";
+
+interface SharedProps {
+    link: string,
+    speakerName: string
+}
+
+const Shared: React.FC<SharedProps> = ({link, speakerName}) => {
+    const {toast, dismiss} = useToast();
+    const handleBrochureClick = async () => {
+        if (navigator.share) {
+            await navigator.share({
+                title: `Speaker: ${speakerName}`,
+                text: "¡Mira este speaker!",
+                url: link,
+            });
+        } else {
+            await navigator.clipboard.writeText(link);
+            toast({
+                title: `Link de speaker: ${speakerName}`,
+                description: "Copiado al portapapeles",
+            });
+            setTimeout(() => {
+                dismiss()
+            }, 2000)
+        }
+    };
+    return (
+        <Share2 role="link" onClick={handleBrochureClick} className="flex h-6 w-6 hover:text-primary-600">
+            <title>Compartir</title>
+        </Share2>
+    )
+}
+export default Shared

src/components/Speaker.tsx

@@ -3,6 +3,7 @@ import {ISpeaker} from "@/types/speakers.ts";
 import {Card} from "@/components/ui/card.tsx";
 import SocialMedia from "@/components/SocialMedia.tsx";
 import {useNavigate} from "react-router-dom";
+import {scrollToTop} from "@/lib/utils.ts";
 
 interface SpeakerProps {
     speaker: ISpeaker;

src/components/SpeakerInfo.tsx

@@ -1,16 +1,28 @@
 import {ISpeaker} from "@/types/speakers.ts";
 import {Card, CardFooter} from "@/components/ui/card.tsx";
 import React, {useEffect} from "react";
-import {useLocation} from "react-router-dom";
+import {useLocation, useParams} from "react-router-dom";
 import SocialMedia from "@/components/SocialMedia.tsx";
 import {Badge} from "@/components/ui/badge.tsx";
-import {Share2, Speech} from "lucide-react";
+import { Speech} from "lucide-react";
 import Gradient from "@/components/Gradient.tsx";
+import {useAppContext} from "@/context/AppContext.tsx";
+import {findSpeaker, scrollToTop} from "@/lib/utils.ts";
+import Shared from "@/components/Shared.tsx";
 
 const SpeakerInfo = () => {
     const location = useLocation();
+    const { speakerId } = useParams();
+    const { speakers } = useAppContext();
     const speaker = location.state?.speaker as ISpeaker;
     const {fullName, sessions, profilePicture, tagLine, bio, links} = speaker;
+    const fullUrl = `${window.location.origin}${location.pathname}${location.search}${location.hash}`;
+
+    useEffect(() => {
+        scrollToTop()
+        if (speaker) return;
+        findSpeaker(speakers, speakerId)
+    }, []);
 
   return (
       <Gradient className="py-10 px-20" >
@@ -22,12 +34,10 @@ const SpeakerInfo = () => {
                         <h2 className="text-xl">{tagLine}</h2>
                         <p className="text-gray-700">{bio}</p>
                       <div className="flex items-center justify-start gap-4 text-gray-700">
-                          {links.map((link, index) => (
+                          {links.map((link) => (
                               <SocialMedia key={`link-${link.url}`} className="h-6 w-6 hover:text-primary-600" link={link} />
                           ))}
-                          <Share2 className="hidden h-6 w-6 hover:text-primary-600">
-                              <title>Compartir</title>
-                          </Share2>
+                          <Shared link={fullUrl} speakerName={speaker.fullName} />
                       </div>
                   </div>
               </Card>

src/index.css

@@ -124,6 +124,7 @@ All colors MUST be HSL.
   a,
   button,
   [role="button"],
+  [role="link"],
   input,
   input[type="button"],
   label {

src/lib/utils.ts

@@ -23,11 +23,12 @@ export const addSessionSpeakers = (sessions: ISession[], speakers: ISpeaker[], c
   return speakers.map((speaker) => {
     const session = sessions.find((session) => session.speakers.includes(speaker.id));
     const category = categories.find((category) => session.categoryItems.includes(category.id))
-    console.log(category.name)
     return {
     ...speaker,
       sessions: session,
       category: category.name
     };
   });
-}
+}
+
+export const findSpeaker = (speakers: ISpeaker[], id: string) => speakers.find((speaker) => speaker.id === id);

src/pages/CodeOfConduct.tsx

@@ -1,4 +1,11 @@
+import {useEffect} from "react";
+import {scrollToTop} from "@/lib/utils.ts";
+
 const CodeOfConduct = () => {
+    useEffect(() => {
+        scrollToTop()
+    }, []);
+
     return (
         <section
             className="flex flex-col container gap-8 mx-auto p-4 my-8"

src/pages/PrivacyPolicy.tsx

@@ -1,4 +1,10 @@
+import {useEffect} from "react";
+import {scrollToTop} from "@/lib/utils.ts";
+
 const PrivacyPolicy = () => {
+    useEffect(() => {
+        scrollToTop()
+    }, []);
   return (
       <section
           className="flex flex-col container gap-8 mx-auto p-4 my-8"