[Feature] add react & common dialog

astro.config.mjs

@@ -2,13 +2,15 @@
 import { defineConfig } from "astro/config";
 import node from "@astrojs/node";
 import tailwindcss from "@tailwindcss/vite";
+import react from "@astrojs/react";
 
 // https://astro.build/config
 export default defineConfig({
   output: 'server',
   adapter: node({
     mode: 'standalone'
   }),
+  integrations: [react()],
   vite: {
     plugins: [tailwindcss()],
     server: {

package.json

@@ -11,14 +11,19 @@
   },
   "dependencies": {
     "@astrojs/node": "^9.3.0",
+    "@astrojs/react": "^4.3.0",
     "@fontsource-variable/orbitron": "^5.2.6",
     "@fontsource/ibm-plex-sans-thai": "^5.2.6",
     "@fontsource/zen-dots": "^5.2.6",
     "@lucide/astro": "^0.525.0",
     "@tailwindcss/vite": "^4.1.11",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "astro": "^5.10.1",
     "clsx": "^2.1.1",
     "dotenv": "^17.0.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11"
   },
@@ -29,4 +34,4 @@
     "prettier-plugin-astro": "^0.14.1",
     "typescript": "^5.3.3"
   }
-}
+}

src/components/common/Footer.astro

@@ -2,7 +2,7 @@
 import { cn } from "@/lib/utils"
 
 interface Props {
-  varient?: "firstdate" | "rpkm_home";
+  variant?: "firstdate" | "rpkm_home";
 }
 
 const bgGradient = {
@@ -28,9 +28,9 @@ const bgGradient = {
   }
 }
 
-const { varient = "firstdate" } = Astro.props;
+const { variant = "firstdate" } = Astro.props;
 
-const footerGradient = bgGradient[varient].classes;
+const footerGradient = bgGradient[variant].classes;
 ---
 
 <footer class="text-xs">

src/components/common/react/Dialog.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef, type ReactNode } from 'react';
+import { useDialog } from '../../../hooks/useDialog';
+import '../../../lib/dialogManager'; // Ensure DialogManager is initialized
+
+interface DialogProps {
+  id: string;
+  children: ReactNode;
+  className?: string;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onConfirm?: () => void;
+  backdrop?: boolean;
+  closeOnBackdrop?: boolean;
+}
+
+export function Dialog({
+  id,
+  children,
+  className = '',
+  onOpen,
+  onClose,
+  onConfirm,
+  backdrop = true,
+  closeOnBackdrop = true,
+}: DialogProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const {
+    isOpen,
+    level,
+    close,
+    onOpen: hookOnOpen,
+    onClose: hookOnClose,
+    onConfirm: hookOnConfirm,
+  } = useDialog(id);
+
+  // Handle custom callbacks
+  useEffect(() => {
+    const unsubscribeOpen = hookOnOpen(() => onOpen?.()); 
+    const unsubscribeClose = hookOnClose(() => onClose?.());
+    const unsubscribeConfirm = hookOnConfirm(() => onConfirm?.());
+
+    return () => {
+      unsubscribeOpen();
+      unsubscribeClose();
+      unsubscribeConfirm();
+    };
+  }, [hookOnOpen, hookOnClose, hookOnConfirm, onOpen, onClose, onConfirm]);
+
+  // Handle backdrop clicks
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (closeOnBackdrop && e.target === e.currentTarget) {
+      close();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      ref={dialogRef}
+      className={`fixed top-0 left-1/2 transform -translate-x-1/2 w-full max-w-[440px] h-screen z-50 flex items-center justify-center animate-fade-in ${className}`}
+      style={{ zIndex: 1000 + level }}
+      onClick={backdrop ? handleBackdropClick : undefined}
+    >
+      {backdrop && (
+        <div className="absolute inset-0 bg-black/60 backdrop-blur-md fadein" onClick={close} />
+      )}
+      <div
+        className="relative rounded-lg shadow-lg w-full max-w-sm max-h-[80vh] overflow-auto mx-4 animate-scale-in"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Simple dialog content components for convenience
+export function DialogHeader({ children, className = '' }: { children: ReactNode; className?: string }) {
+  return (
+    <div className={`px-6 py-4 border-b border-gray-200 ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+export function DialogBody({ children, className = '' }: { children: ReactNode; className?: string }) {
+  return (
+    <div className={`${className}`}>
+      {children}
+    </div>
+  );
+}
+
+export function DialogFooter({ children, className = '' }: { children: ReactNode; className?: string }) {
+  return (
+    <div className={`px-6 py-4 border-t border-gray-200 flex justify-end space-x-2 ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+export default Dialog;

src/components/firstdate/Footer.astro

@@ -2,12 +2,12 @@
 import { cn } from "@/lib/utils"
 
 interface Props {
-  varient?: "firstdate" | "other";
+  variant?: "firstdate" | "other";
 }
 
-const { varient } = Astro.props;
+const { variant } = Astro.props;
 
-const footerGradient = varient === "firstdate" 
+const footerGradient = variant === "firstdate" 
   ? "from-[#324B95] to-[#C6EBC5]"
   : "from-[#000000] to-[#FFFFFF]";
 ---