Merge pull request #72 from olillin/subscribe-calendar

Add button to subscribe to calendar

Author: daancs

components/CalendarSubscribeModal.tsx

@@ -0,0 +1,88 @@
+import Button from './Button'
+import Modal from './Modal'
+
+type CalendarSubscribeModalProps = {
+    url: string
+    onClose: () => void
+    background?: string
+}
+
+const CalendarSubscribeModal = (props: CalendarSubscribeModalProps) => {
+    return (
+        <Modal onClose={props.onClose} background={props.background}>
+            <h2 className="text-2xl mb-4 pr-8">Lägg till i kalender</h2>
+
+            <div className="flex flex-col gap-2">
+                <CalendarLink
+                    href={`https://calendar.google.com/calendar/r?cid=${encodeURIComponent(
+                        props.url
+                    )}`}
+                >
+                    Google Kalender
+                </CalendarLink>
+                <CalendarLink href={props.url}>Apple Kalender</CalendarLink>
+                <CalendarLink
+                    href={`https://outlook.office.com/owa/?path=/calendar/action/compose&rru=addsubscription&url=${encodeURIComponent(
+                        props.url
+                    )}`}
+                >
+                    Outlook
+                </CalendarLink>
+            </div>
+
+            <div className="mt-8">
+                <p>Eller kopiera länken nedan:</p>
+                <input
+                    type="text"
+                    id="calendarLink"
+                    disabled
+                    aria-disabled="true"
+                    value={props.url}
+                    className="w-full px-1 rounded-sm bg-white text-black mt-2 mb-4"
+                />
+
+                <div className="w-full flex">
+                    <span className="ml-auto">
+                        <Button
+                            action={() => {
+                                console.log('Copying calendar link')
+
+                                const inputElement = document.getElementById(
+                                    'calendarLink'
+                                ) as HTMLInputElement
+
+                                inputElement.select()
+                                inputElement.setSelectionRange(0, 99999)
+
+                                navigator.clipboard.writeText(props.url)
+
+                                alert('Kopierat!')
+                            }}
+                        >
+                            Kopiera
+                        </Button>
+                    </span>
+                </div>
+            </div>
+        </Modal>
+    )
+}
+
+export default CalendarSubscribeModal
+
+interface CalendarLinkProps {
+    href: string
+    children?: string
+}
+
+const CalendarLink = (props: CalendarLinkProps) => {
+    return (
+        <a
+            className="text-cyan-600 underline"
+            href={props.href}
+            target="_blank"
+        >
+            {props.children}
+        </a>
+    )
+}

components/Modal.tsx

@@ -0,0 +1,41 @@
+interface ModalProps {
+    children?: React.ReactNode
+    onClose: () => void
+    background?: string
+}
+
+const Modal = (props: ModalProps) => {
+    return (
+        <div className="fixed inset-0 z-40 flex justify-center items-center">
+            <button
+                className="absolute inset-0 bg-black/60"
+                onClick={e => {
+                    e.preventDefault()
+                    props.onClose()
+                }}
+            />
+
+            <div
+                className={
+                    'absolute rounded-lg shadow-lg px-8 pt-4 pb-6 border border-white ' +
+                    (props.background ?? 'bg-black')
+                }
+            >
+                <div className="flex justify-end">
+                    <button
+                        className="r-1 t-0 -mr-4 aspect-square"
+                        onClick={e => {
+                            e.preventDefault()
+                            props.onClose()
+                        }}
+                    >
+                        <span className="h-4 p-2 text-xl">&times;</span>
+                    </button>
+                </div>
+                {props.children}
+            </div>
+        </div>
+    )
+}
+
+export default Modal

components/Page.tsx

@@ -46,7 +46,7 @@ export default function Page(props: PageProps) {
       )}
 
       {/* Header */}
-      <div className="fixed flex flex-col items-center w-screen top-0 z-50 pointer-events-none">
+      <div className="fixed flex flex-col items-center w-screen top-0 z-20 pointer-events-none">
         <Header year={props.currentYear} blackout={props.blackout ?? false} />
       </div>
     </>

package-lock.json

@@ -19,6 +19,7 @@
     "@types/multer": "^1.4.7",
     "cookie": "^0.5.0",
     "formidable": "^2.1.1",
+    "iamcal": "^2.1.2",
     "jose": "^4.10.0",
     "multer": "^1.4.5-lts.1",
     "next": "^12.3.4",