feat: example usage in remix

remix-example/app/routes/_index.tsx

@@ -1,48 +1,42 @@
 import type { MetaFunction } from "@remix-run/node";
 
+import { useModal } from "@gsong/react-modal-dialog";
+
 export const meta: MetaFunction = () => {
   return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
+    { title: "Modal Demo" },
+    { name: "description", content: "@gsong/react-modal-dialog demo" },
   ];
 };
 
 export default function Index() {
+  const { Modal, openModal, closeModal } = useModal();
+
   return (
-    <div className="font-sans p-4">
-      <h1 className="text-3xl">Welcome to Remix</h1>
-      <ul className="list-disc mt-4 pl-6 space-y-2">
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/quickstart"
-            rel="noreferrer"
-          >
-            5m Quick Start
-          </a>
-        </li>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/tutorial"
-            rel="noreferrer"
-          >
-            30m Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/docs"
-            rel="noreferrer"
-          >
-            Remix Docs
-          </a>
-        </li>
-      </ul>
+    <div style={{ height: "200vh" }}>
+      <button
+        onClick={openModal}
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      >
+        Open Modal
+      </button>
+
+      <Modal
+        allowBodyScroll
+        allowDismiss
+        onDismiss={() => console.debug("Dismissed")}
+        onCancel={() => console.debug("Canceled")}
+        onClose={() => console.debug("Closed")}
+        className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-auto space-y-4"
+      >
+        <div className="text-lg font-semibold mb-2">Modal content</div>
+        <button
+          onClick={closeModal}
+          className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded self-end transition duration-300 ease-in-out"
+        >
+          Close Modal
+        </button>
+      </Modal>
     </div>
   );
 }

remix-example/package.json

@@ -11,6 +11,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@gsong/react-modal-dialog": "workspace:2.0.0-unstable.0",
     "@remix-run/node": "^2.11.2",
     "@remix-run/react": "^2.11.2",
     "@remix-run/serve": "^2.11.2",