From 2ec99c64f63f3ec795bcd961afed0b3aa99c156c Mon Sep 17 00:00:00 2001
From: Val <44112412+LawfaL@users.noreply.github.com>
Date: Thu, 13 Feb 2025 17:30:45 +0700
Subject: [PATCH] feat: modal component

---
 public/assets/css/modal.css  | 38 ++++++++++++++++++++++++++++++++++++
 public/assets/css/styles.css |  1 +
 src/app/(main)/page.tsx      |  6 +++++-
 src/components/Hero.tsx      |  1 +
 src/components/Modal.tsx     | 23 ++++++++++++++++++++++
 5 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/css/modal.css

diff --git a/public/assets/css/modal.css b/public/assets/css/modal.css
new file mode 100644
index 0000000..3b06d88
--- /dev/null
+++ b/public/assets/css/modal.css
@@ -0,0 +1,38 @@
+/* Modal.css */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  position: relative;
+  max-width: 500px;
+  width: 100%;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.modal-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #333;
+}
+
+.modal-close:hover {
+  color: #000;
+}
diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css
index 6ea1091..258215d 100644
--- a/public/assets/css/styles.css
+++ b/public/assets/css/styles.css
@@ -5,6 +5,7 @@
 @import "./magnific-popup.css";
 @import "./owl.carousel.css";
 @import "./splitting.css";
+@import "./modal.css";
 @import "./YTPlayer.css";
 @import "./demo-main/demo-main.css";
 @import "./demo-bold/demo-bold.css";
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index 78a1fdf..6b6e9bf 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -7,7 +7,6 @@ export const metadata = {
   description: "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
   keywords: "Cochise Oncology, Oncology, Healthcare, Medical Services, Cancer Treatment",
   author: "Cochise Oncology",
-  viewport: "width=device-width, initial-scale=1.0",
   robots: "index, follow",
   og: {
     title: "HomePage - Cochise Oncology",
@@ -25,6 +24,11 @@ export const metadata = {
   },
 };
 
+export const viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+
 export default function Home() {
   return (
     <>
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 79332a4..bf6ee40 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -2,6 +2,7 @@
 
 import { useRef } from "react";
 import Link from "next/link";
+import Modal from "./Modal";
 
 export default function Hero6() {
   const videoRef = useRef<any | null>(null);
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index e69de29..53b4c28 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+interface ModalProps {
+  isOpen: boolean; // Whether the modal is open or not
+  onClose: () => void; // Function to close the modal
+  children: React.ReactNode; // Content to be displayed inside the modal
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal-content">
+        <button className="modal-close" onClick={onClose}>
+          &times;
+        </button>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;