Lego 0007/rrss details v2 (#123)

Author: joseglego

package-lock.json

@@ -28,6 +28,7 @@
     "@tanstack/react-query": "^4.10.3",
     "@tanstack/react-query-devtools": "^4.11.0",
     "@types/canvas-confetti": "^1.6.0",
+    "add-to-calendar-button": "^1.18.8",
     "atropos": "^1.0.2",
     "canvas-confetti": "^1.6.0",
     "csstype": "^3.0.11",

package.json

@@ -2,8 +2,9 @@ import styled from "@emotion/styled";
 import Atropos from "atropos/react";
 import { AnimatePresence, motion, MotionProps } from "framer-motion";
 import { useEffect, useState } from "react";
-import { Facebook, Linkedin, Twitter, Copy } from "react-feather";
+import { Facebook, Linkedin, Twitter, Copy, Calendar } from "react-feather";
 import toast, { Toaster } from "react-hot-toast";
+import { atcb_action, atcb_init } from "add-to-calendar-button";
 
 import { jsconfTheme, ViewportSizes } from "../../../styles/theme";
 import { GenericLink } from "../TicketSection/shared";
@@ -357,7 +358,9 @@ export const Ticket = ({
 }) => {
   const [loaded, setLoaded] = useState(!fadeIn);
   const animation = useAnimation();
+
   useEffect(() => {
+    atcb_init();
     setTimeout(() => {
       setLoaded(true);
     }, 1100);
@@ -445,13 +448,32 @@ export const Ticket = ({
                 <Facebook size={32} />
               </SocialAnchor>
               <SocialAnchor
-                href={`https://www.linkedin.com/sharing/share-offsite?url=${publicUrl}`}
+                href={`https://www.linkedin.com/sharing/share-offsite?url=${encodeURIComponent(
+                  publicUrl
+                )}`}
                 target="_blank"
                 rel="noreferrer"
                 type="linkedin"
               >
                 <Linkedin size={32} />
               </SocialAnchor>
+              <SocialButton
+                onClick={() => {
+                  atcb_action({
+                    name: "JSConf Chile",
+                    startDate: "2023-03-03",
+                    endDate: "2023-03-04",
+                    startTime: "08:00",
+                    endTime: "19:00",
+                    description:
+                      "Acompáñanos, en la primera edición Chilena, de la más prestigiosa conferencia de JavaScript. 2 días de Charlistas internacionales, comunidad, aprendizaje y conexiones, este 03 y 04 de Febrero, 2023.",
+                    options: ["Google", "Apple", "Microsoft365", "Outlook.com"],
+                    timeZone: "America/Santiago",
+                  });
+                }}
+              >
+                <Calendar size={32} />
+              </SocialButton>
               <SocialButton
                 onClick={() => {
                   navigator.clipboard