Setup basic modal

Author: jmrossy

src/app/staking/page.tsx

@@ -1,8 +1,9 @@
 'use client';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { SolidButton } from 'src/components/buttons/SolidButton';
 import { Card } from 'src/components/layout/Card';
 import { Section } from 'src/components/layout/Section';
+import { Modal, useModal } from 'src/components/menus/Modal';
 import { Amount } from 'src/components/numbers/Amount';
 import { ValidatorGroupTable } from 'src/features/validators/ValidatorGroupTable';
 import { ValidatorGroup, ValidatorStatus } from 'src/features/validators/types';
@@ -11,11 +12,20 @@ import { bigIntMin } from 'src/utils/math';
 
 export default function Index() {
   const { groups, totalVotes } = useValidatorGroups();
+  const showModal = useModal('stake');
+  useEffect(() => {
+    setTimeout(() => {
+      showModal();
+    }, 5000);
+  }, [showModal]);
   return (
-    <div className="space-y-8">
-      <HeroSection totalVotes={totalVotes} groups={groups} />
-      <ListSection totalVotes={totalVotes} groups={groups} />
-    </div>
+    <>
+      <div className="space-y-8">
+        <HeroSection totalVotes={totalVotes} groups={groups} />
+        <ListSection totalVotes={totalVotes} groups={groups} />
+      </div>
+      <Modal id="stake">Test</Modal>
+    </>
   );
 }
 

src/components/menus/Modal.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren } from 'react';
+
+export function useModal(id: string) {
+  return () => {
+    const dialog = document.getElementById(id) as HTMLDialogElement;
+    dialog?.showModal();
+  };
+}
+
+export function Modal({
+  id,
+  className,
+  children,
+}: PropsWithChildren<{ id: string; className?: string }>) {
+  return (
+    <dialog id={id} className="modal modal-bottom sm:modal-middle">
+      <div className={`modal-box ${className}`}>
+        <form method="dialog">
+          <button className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2 outline-none">
+            ✕
+          </button>
+        </form>
+        {children}
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button>close</button>
+      </form>
+    </dialog>
+  );
+}