Added ability to delete reports.

components/common/ConfirmDeleteForm.js

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
+import useMessages from 'hooks/useMessages';
+
+export function ConfirmDeleteForm({ name, onConfirm, onClose }) {
+  const [loading, setLoading] = useState(false);
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+
+  const handleConfirm = () => {
+    setLoading(true);
+    onConfirm();
+  };
+
+  return (
+    <Form>
+      <p>
+        <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{name}</b> }} />
+      </p>
+      <FormButtons flex>
+        <LoadingButton loading={loading} onClick={handleConfirm} variant="danger">
+          {formatMessage(labels.delete)}
+        </LoadingButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default ConfirmDeleteForm;

components/common/LinkButton.js

@@ -0,0 +1,12 @@
+import Link from 'next/link';
+import { Icon, Icons, Text } from 'react-basics';
+import styles from './LinkButton.module.css';
+
+export default function LinkButton({ href, icon, children }) {
+  return (
+    <Link className={styles.button} href={href}>
+      <Icon>{icon || <Icons.ArrowRight />}</Icon>
+      <Text>{children}</Text>
+    </Link>
+  );
+}

components/common/LinkButton.module.css

@@ -0,0 +1,28 @@
+.button {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  white-space: nowrap;
+  gap: var(--size200);
+  font-family: inherit;
+  color: var(--base900);
+  background: var(--base100);
+  border: 1px solid transparent;
+  border-radius: var(--border-radius);
+  min-height: var(--base-height);
+  padding: 0 var(--size600);
+  position: relative;
+  cursor: pointer;
+}
+
+.button:hover {
+  background: var(--base200);
+}
+
+.button:active {
+  background: var(--base300);
+}
+
+.button:visited {
+  color: var(--base900);
+}