diff --git a/src/components/SettingsButton.js b/src/components/SettingsButton.js
new file mode 100644
index 0000000..750978c
--- /dev/null
+++ b/src/components/SettingsButton.js
@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { IconButton } from "theme-ui";
+
+import SettingsIcon from "../icons/SettingsIcon";
+import SettingsModal from "../modals/SettingsModal";
+
+function SettingsButton() {
+ const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
+ function openModal() {
+ setIsSettingsModalOpen(true);
+ }
+ function closeModal() {
+ setIsSettingsModalOpen(false);
+ }
+
+ return (
+ <>
+
+
+
+
+ >
+ );
+}
+
+export default SettingsButton;
diff --git a/src/components/party/Party.js b/src/components/party/Party.js
index 59329d1..71d5162 100644
--- a/src/components/party/Party.js
+++ b/src/components/party/Party.js
@@ -5,6 +5,7 @@ import AddPartyMemberButton from "./AddPartyMemberButton";
import Nickname from "./Nickname";
import ChangeNicknameButton from "./ChangeNicknameButton";
import StartStreamButton from "./StartStreamButton";
+import SettingsButton from "../SettingsButton";
function Party({
nickname,
@@ -60,6 +61,7 @@ function Party({
stream={stream}
/>
+
);
diff --git a/src/icons/SettingsIcon.js b/src/icons/SettingsIcon.js
new file mode 100644
index 0000000..13bceb9
--- /dev/null
+++ b/src/icons/SettingsIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function SettingsIcon() {
+ return (
+
+ );
+}
+
+export default SettingsIcon;
diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js
new file mode 100644
index 0000000..4c9d637
--- /dev/null
+++ b/src/modals/SettingsModal.js
@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { Box, Label, Flex, Button } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+import db from "../database";
+
+function SettingsModal({ isOpen, onRequestClose }) {
+ const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+ async function handleEraseAllData() {
+ await db.delete();
+ window.location.reload();
+ }
+
+ return (
+
+
+
+
+
+
+ setIsDeleteModalOpen(false)}
+ >
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default SettingsModal;