web: added the base for the web project

apps/web/src/modals/Modal/Container.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
+import { popModal } from "..";
+
+type ModalContentProps = {
+  children: React.ReactNode;
+};
+
+export function ModalContent({ children }: ModalContentProps) {
+  return (
+    <div className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200  sm:rounded-lg md:w-full">
+      {children}
+    </div>
+  );
+}
+
+type ModalHeaderProps = {
+  title: string | React.ReactNode;
+};
+
+export function ModalHeader({ title }: ModalHeaderProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="font-medium">{title}</div>
+      <Button variant="ghost" size="sm" onClick={() => popModal()}>
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </Button>
+    </div>
+  );
+}