diff --git a/src/components/Import/index.tsx b/src/components/Import/index.tsx
new file mode 100644
index 0000000..ac5ed23
--- /dev/null
+++ b/src/components/Import/index.tsx
@@ -0,0 +1,73 @@
+import { Modal } from "../Modal";
+import { useState } from "preact/hooks";
+
+export const Import = () => {
+ const [modalOpen, setModalOpen] = useState(false);
+
+ return (
+ <>
+ {
+ setModalOpen(true);
+ }}
+ >
+
+
+ {" "}
+ Import/Export
+
+ {modalOpen && }
+ >
+ );
+};
+
+const ImportModal = ({ setModalOpen }) => {
+ return (
+
+ Import/Export Manager{" "}
+
+
+
+
+
+ >
+ }
+ >
+ <>
+
+
+
+
+
+
+
+
+
+ >
+
+ );
+};
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index c1717b8..d3e14f9 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -3,7 +3,7 @@ import { createPortal } from "preact/compat";
type Props = {
setModalOpen: (open: boolean) => never;
- title: string;
+ title: string | JSX.Element;
onSubmitText?: string;
onSubmit?: () => void;
children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
diff --git a/src/components/Reminder/Embed/Fields/Field.tsx b/src/components/Reminder/Embed/Fields/Field.tsx
index a6c6de2..31ef16c 100644
--- a/src/components/Reminder/Embed/Fields/Field.tsx
+++ b/src/components/Reminder/Embed/Fields/Field.tsx
@@ -18,19 +18,21 @@ export const Field = ({ title, value, inline, index, onUpdate }) => {
title: ev.currentTarget.value,
})
}
- >
-
+ />
+ {(value !== "" || title !== "") && (
+
+ )}
@@ -77,14 +77,14 @@ export const Embed = () => {
url={reminder.embed_image_url}
alt="Large embedded image"
setImage={() => {}}
- >
+ />
+ />
);
};
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index 1ec2b03..780af2a 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -7,6 +7,7 @@ import { GuildEntry } from "./GuildEntry";
import { fetchUserGuilds, GuildInfo } from "../../api";
import { useState } from "preact/hooks";
import { TimezonePicker } from "../TimezonePicker";
+import { Import } from "../Import";
type ContentProps = {
guilds: GuildInfo[];
@@ -28,12 +29,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {