showing modal for creating room

components/Dashboard/Rooms.tsx

@@ -4,6 +4,7 @@ import { FaAngleDown, FaBell, FaClock, FaPlus, FaLink } from "react-icons/fa";
 import { IoTimer } from "react-icons/io5";
 import { BsThreeDots } from "react-icons/bs";
 import Image from "next/image";
+import CreateRoom from "../Modals/CreateRoom";
 
 enum RoomTypeFilter {
   all = "all",
@@ -34,6 +35,9 @@ export default function DashboardRoom() {
 
   return (
     <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
+      {/*  modal for creating room */}
+      <CreateRoom show={true} />
+
       {/* header */}
       <span className="flex flex-row justify-end space-x-3 pb-5 items-center">
         <span className="text-white mr-auto">

components/Modals/CreateRoom.tsx

@@ -0,0 +1,17 @@
+import { Modal } from "antd";
+
+export default function CreateRoom({ show }) {
+  return (
+    <Modal
+      title="Create Room"
+      centered
+      visible={show}
+      // onOk={() => this.setModal2Visible(false)}
+      // onCancel={() => this.setModal2Visible(false)}
+    >
+      <p>some contents...</p>
+      <p>some contents...</p>
+      <p>some contents...</p>
+    </Modal>
+  );
+}

components/Modals/PowerPlayer.tsx

@@ -1,5 +1,5 @@
 import { Modal, Tooltip } from "antd";
-import { Message } from "../models/message";
+import { Message } from "../../models/message";
 import { FaBackward } from "react-icons/fa";
 
 export default function PowerPlayer(props: { messages: Message[] }) {

contexts/audioContext.tsx

@@ -7,7 +7,7 @@ import { v4 as uuidv4 } from "uuid";
 import AudioPlayer from "react-h5-audio-player";
 import "react-h5-audio-player/lib/styles.css";
 import CloudStorageService from "../services/cloudStorageService";
-import PowerPlayer from "../components/PowerPlayer";
+import PowerPlayer from "../components/Modals/PowerPlayer";
 import { Message } from "../models/message";
 import { useAuth } from "./authContext";
 import { SendService } from "../services/sendService";