feat(web): Delete events from Event page and API (#991)

Co-authored-by: Scott Roach <scott@thinkpivot.io>
Co-authored-by: Paul Armstrong <paul@spaceyak.com>

web/src/routes/StyleGuide.jsx

@@ -2,6 +2,7 @@ import { h } from 'preact';
 import ArrowDropdown from '../icons/ArrowDropdown';
 import ArrowDropup from '../icons/ArrowDropup';
 import Button from '../components/Button';
+import Dialog from '../components/Dialog';
 import Heading from '../components/Heading';
 import Select from '../components/Select';
 import Switch from '../components/Switch';
@@ -10,6 +11,7 @@ import { useCallback, useState } from 'preact/hooks';
 
 export default function StyleGuide() {
   const [switches, setSwitches] = useState({ 0: false, 1: true, 2: false, 3: false });
+  const [showDialog, setShowDialog] = useState(false);
 
   const handleSwitch = useCallback(
     (id, checked) => {
@@ -18,6 +20,10 @@ export default function StyleGuide() {
     [switches]
   );
 
+  const handleDismissDialog = () => {
+    setShowDialog(false);
+  };
+
   return (
     <div>
       <Heading size="md">Button</Heading>
@@ -59,6 +65,26 @@ export default function StyleGuide() {
         </Button>
       </div>
 
+      <Heading size="md">Dialog</Heading>
+      <Button
+        onClick={() => {
+          setShowDialog(true);
+        }}
+      >
+        Show Dialog
+      </Button>
+      {showDialog ? (
+        <Dialog
+          onDismiss={handleDismissDialog}
+          title="This is a dialog"
+          text="Would you like to see more?"
+          actions={[
+            { text: 'Yes', color: 'red', onClick: handleDismissDialog },
+            { text: 'No', onClick: handleDismissDialog },
+          ]}
+        />
+      ) : null}
+
       <Heading size="md">Switch</Heading>
       <div className="flex-col space-y-4 max-w-4xl">
         <Switch label="Disabled, off" labelPosition="after" />