Add to Calendar Button in Framer

import type { ComponentType } from "react"

export function withAddEventToCalendar(Component): ComponentType {
    return (props) => {
        const { style, ...rest } = props

        const eventName = "Example Event Name"
        const eventDescription = "Even description here."
        const eventLocation = "Specify event location."
        const startDate = "2024-09-10T12:00:00"
        const endDate = "2024-09-10T12:15:00"

        const generateGoogleCalendarUrl = () => {
            const baseUrl = "https://calendar.google.com/calendar/r/eventedit"
            const params = new URLSearchParams({
                text: eventName,
                details: eventDescription,
                location: eventLocation,
                dates: `${startDate.replace(
                    /-|:|\.\d+/g,
                    ""
                )}/${endDate.replace(/-|:|\.\d+/g, "")}`,
            })
            return `${baseUrl}?${params.toString()}`
        }

        const generateICSFile = () => {
            const icsContent = `BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
DTSTART:${startDate.replace(/-|:|\.\d+/g, "")}
DTEND:${endDate.replace(/-|:|\.\d+/g, "")}
SUMMARY:${eventName}
DESCRIPTION:${eventDescription}
LOCATION:${eventLocation}
END:VEVENT
END:VCALENDAR`
            const blob = new Blob([icsContent], {
                type: "text/calendar;charset=utf-8",
            })
            const url = URL.createObjectURL(blob)
            const a = document.createElement("a")
            a.href = url
            a.download = "event.ics"
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
        }

        const handleClick = () => {
            const isAppleDevice =
                /iPhone|iPad|iPod|Mac/.test(navigator.userAgent) &&
                !window.MSStream
            if (isAppleDevice) {
                generateICSFile()
            } else {
                window.open(generateGoogleCalendarUrl(), "_blank")
            }
        }

        return <Component {...rest} style={style} onClick={handleClick} />
    }
}