feat: add MeetingModal component

components/meeting-modal.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Image from "next/image";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+import { cn } from "@/lib/utils";
+
+type MeetingModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  className: string;
+  children?: React.ReactNode;
+  buttonText?: string;
+  handleClick?: () => void;
+  image?: string;
+  buttonIcon?: string;
+};
+
+const MeetingModal = ({
+  isOpen,
+  onClose,
+  title,
+  className,
+  children,
+  buttonText,
+  handleClick,
+  image,
+  buttonIcon,
+}: MeetingModalProps) => {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="flex w-full max-w-[520px] flex-col gap-6 border-none bg-dark-1 px-6 py-9 text-white">
+        <div className="flex flex-col gap-6">
+          {image && (
+            <div className="flex justify-center">
+              <Image src={image} alt="image" width={72} height={72} />
+            </div>
+          )}
+          <h1 className={cn("text-3xl font-bold leading-[42px]", className)}>{title}</h1>
+          {children}
+          <Button
+            className="bg-blue-1 focus-visible:ring-0 focus-visible:ring-offset-0"
+            onClick={handleClick}
+          >
+            {buttonIcon && <Image src={buttonIcon} alt="button icon" width={13} height={13} />}{" "}
+            &nbsp;
+            {buttonText || "Schedule Meeting"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default MeetingModal;

components/meeting-type-list.tsx

@@ -3,6 +3,7 @@
 import React, { useState } from "react";
 import HomeCard from "./home-card";
 import { useRouter } from "next/navigation";
+import MeetingModal from "./meeting-modal";
 
 type Props = {};
 
@@ -12,6 +13,8 @@ const MeetingTypeList = (props: Props) => {
     "isScheduleMeeting" | "isJoinMeeting" | "isInstantMeeting" | undefined
   >();
 
+  const createMeeting = () => {};
+
   return (
     <section className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4">
       <HomeCard
@@ -42,6 +45,14 @@ const MeetingTypeList = (props: Props) => {
         handleClick={() => setMeetingState("isJoinMeeting")}
         className="bg-yellow-1"
       />
+      <MeetingModal
+        isOpen={meetingState === "isInstantMeeting"}
+        onClose={() => setMeetingState(undefined)}
+        title="Start an Instant Meeting"
+        className="text-center"
+        buttonText="Start Meeting"
+        handleClick={createMeeting}
+      />
     </section>
   );
 };