Testing only: add examples for the new modals

src/pages/Settings.tsx

@@ -1,10 +1,11 @@
 import {ReactNode, useEffect, useState} from 'react';
 import {ChevronDownIcon, TrashIcon, WrenchScrewdriverIcon} from '@heroicons/react/20/solid';
 import {Typography} from '../Components/Tailwind';
-import {DangerButton, SimpleButton} from '../Components/Tailwind/Button';
+import Button, {DangerButton, SimpleButton} from '../Components/Tailwind/Button';
 import {Toggle} from '../Components/Tailwind/Toggle';
 import TopNav from '../Components/TopNav';
 import db from '../db/db';
+import {useConfirmModal, useErrorModal} from '../hooks/useModal';
 import useSettings from '../hooks/useSettings';
 import {playSound, sounds} from '../utils/sound';
 
@@ -37,6 +38,8 @@ function MainSettings() {
     hapticFeedback,
     setHapticFeedback,
   } = useSettings();
+  const errorModal = useErrorModal();
+  const confirmModal = useConfirmModal();
 
   const toggleDarkMode = () => {
     // Set the theme preference in localStorage and in the SettingsContext
@@ -86,6 +89,27 @@ function MainSettings() {
       <SettingsSection title="Appearance">
         <SettingsToggle title="Dark theme" checked={darkMode} onToggle={toggleDarkMode} />
       </SettingsSection>
+      <Button
+        onClick={() => {
+          errorModal({
+            title: 'Oops! The application crashed.',
+            content: 'We blame the developers. They blame the caffeine shortage.',
+          });
+        }}
+      >
+        Show error
+      </Button>
+      <Button
+        onClick={() => {
+          confirmModal({
+            title: 'Unsubscribe from this newsletter?',
+            content: 'But what about the three people in the world who will notice?',
+            onConfirm: () => {},
+          });
+        }}
+      >
+        Show confirmation
+      </Button>
     </div>
   );
 }