Almost done

2026-03-05 17:35:27 +01:00
parent 278471e53b
commit e44fceaf32
30 changed files with 1077 additions and 572 deletions
@@ -0,0 +1,19 @@
+// app/components/Modals/Member.tsx
+
+import { ModalProps } from "@/app/types";
+import Modal from "./Modal";
+import ModalAction from "./ModalAction";
+
+export default function MemberModal({ onClose }: ModalProps) {
+    return (
+        <Modal onClose={onClose}>
+            <img src="/images/logo-black.svg" alt="Logo" className="h-25" />
+            <h2 className="text-[#406185] my-2.5 text-2xl font-bold uppercase">Registrera dig</h2>
+            <p className="text-[#406185] my-2.5">Trycka på knappen nedan för att starta registreringen. Du kommer att skickas till laget.se</p>
+
+            <ModalAction href="https://www.laget.se/LVS/Member" className="mt-5">
+                Bli medlem
+            </ModalAction>
+        </Modal>
+    );
+}
@@ -0,0 +1,38 @@
+// app/components/Modals/Modal.tsx
+
+import { ModalProps } from "@/app/types";
+import React from "react";
+
+
+interface BaseModalProps extends ModalProps {
+    onClose: () => void;
+    children: React.ReactNode;
+}
+
+export default function Modal({ onClose, children }: BaseModalProps) {
+    return (
+        <div
+            className="fixed inset-0 z-50 bg-black/60 flex justify-center items-center overflow-auto"
+            onClick={onClose}
+        >
+            <div
+                className="bg-white p-5 w-[80vw] max-w-max min-w-75 rounded-[15px] relative flex flex-col items-center text-center font-semibold text-[#406185]"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <button
+                    className="absolute right-3 top-3 p-2 rounded-full transition-all duration-300 ease-in-out hover:bg-gray-100 hover:rotate-90 active:scale-90 group cursor-pointer"
+                    onClick={onClose}
+                    aria-label="Stäng"
+                >
+                    <svg
+                        viewBox="0 0 413.348 413.348"
+                        className="w-4 h-4 fill-black transition-colors duration-300 group-hover:fill-[#406185]"
+                    >
+                        <path d="m413.348 24.354-24.354-24.354-182.32 182.32-182.32-182.32-24.354 24.354 182.32 182.32-182.32 182.32 24.354 24.354 182.32-182.32 182.32 182.32 24.354-24.354-182.32-182.32z" />
+                    </svg>
+                </button>
+                {children}
+            </div>
+        </div>
+    );
+}
@@ -0,0 +1,27 @@
+// app/components/Modals/ModalAction.tsx
+
+import React from 'react';
+
+interface ModalActionProps {
+    href: string;
+    children: React.ReactNode;
+    className?: string; // To allow for specific margins like mt-5
+}
+
+export default function ModalAction({ href, children, className = "" }: ModalActionProps) {
+    return (
+        <a
+            href={href}
+            target={href.startsWith('http') ? "_blank" : undefined}
+            rel={href.startsWith('http') ? "noreferrer" : undefined}
+            className={`
+                text-white bg-[#406185] uppercase font-bold py-2.25 px-11.5 
+                rounded-[50px] text-[1rem] text-center transition-all duration-300 
+                hover:opacity-90 hover:scale-105 active:scale-95 shadow-md 
+                hover:shadow-lg inline-block ${className}
+            `}
+        >
+            {children}
+        </a>
+    );
+}
@@ -0,0 +1,22 @@
+// app/components/Modals/Subscribe.tsx
+
+import { ModalProps } from "@/app/types";
+import Modal from "./Modal";
+import ModalAction from "./ModalAction";
+
+export default function SubscribeModal({ onClose }: ModalProps) {
+    return (
+        <Modal onClose={onClose}>
+            <h2 className="text-[#406185] my-2.5 text-2xl font-bold uppercase">Prenumerera</h2>
+            <p className="text-[#406185] my-2.5">Välj vilken LEVEL du vill prenumerera på.</p>
+
+            <div className="flex flex-row flex-wrap justify-center gap-6.25 mt-5 max-w-162.5">
+                <ModalAction href="webcal://cal.laget.se/lvs-level-5-6.ics">Level 5-6</ModalAction>
+                <ModalAction href="webcal://cal.laget.se/lvs-level-7-8.ics">Level 7-8</ModalAction>
+                <ModalAction href="webcal://cal.laget.se/lvs-level-8-9.ics">Level 8-9</ModalAction>
+                <ModalAction href="webcal://cal.laget.se/lvs-level-10.ics">Level 10</ModalAction>
+                <ModalAction href="webcal://cal.laget.se/LVS.ics">Hela klubben</ModalAction>
+            </div>
+        </Modal>
+    );
+}