38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
// 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>
|
|
);
|
|
} |