modal create button working

components/Dashboard/Rooms.tsx

@@ -5,6 +5,10 @@ import { IoTimer } from "react-icons/io5";
 import { BsThreeDots } from "react-icons/bs";
 import Image from "next/image";
 import CreateRoom from "../Modals/CreateRoom";
+import {
+  ShowModalType,
+  useKeyboardContext,
+} from "../../contexts/keyboardContext";
 
 enum RoomTypeFilter {
   all = "all",
@@ -21,6 +25,8 @@ enum RoomTimeFilter {
 }
 
 export default function DashboardRoom() {
+  const { handleModalType } = useKeyboardContext();
+
   // get rooms data realtime
   useEffect(() => {
     /**
@@ -57,7 +63,11 @@ export default function DashboardRoom() {
           </span>
 
           <span className="text-gray-300 hover:text-white hover:cursor-pointer">
-            Live
+            Me
+          </span>
+
+          <span className="text-gray-300 hover:text-white hover:cursor-pointer">
+            Now
           </span>
 
           <span className="text-gray-300 hover:text-white hover:cursor-pointer">
@@ -69,7 +79,7 @@ export default function DashboardRoom() {
           </span>
 
           <span className="text-gray-300 hover:text-white hover:cursor-pointer">
-            Expired
+            Archive
           </span>
         </span>
 
@@ -77,7 +87,10 @@ export default function DashboardRoom() {
           Week <FaAngleDown />
         </span>
 
-        <button className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40">
+        <button
+          onClick={() => handleModalType(ShowModalType.createRoom)}
+          className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40"
+        >
           <FaPlus className="text-lg text-white" />
         </button>
 

components/Modals/CreateRoom.tsx

@@ -66,9 +66,22 @@ export default function CreateRoomModal() {
       <div className="flex flex-col">
         <span className="flex flex-col items-start">
           <span className="text-md">Link</span>
-          <span className="text-gray-300 text-xs mb-2">
-            Please make sure this is valid so that your team can join properly.
-          </span>
+          {roomLink ? (
+            <span className="text-gray-300 text-xs mb-2">
+              Please make sure this is valid so that your team can join
+              properly.
+            </span>
+          ) : (
+            <a
+              href="https://meet.google.com"
+              target={"_blank"}
+              rel={"noreferrer"}
+              className="text-xs mb-2"
+            >
+              Click here to create one.
+            </a>
+          )}
+
           <input
             className="w-full rounded-lg bg-gray-50 p-3"
             value={roomLink}