import { createRef, useEffect, useState } from "react" import { Button } from "../../components/button" import { Header } from "../../components/header" import { SettingsRelay, getRelays, addRelay, toggleRelay, removeRelay, } from "../../lib/localStorage" import { Input } from "../../components/input" import { MdDelete } from "react-icons/md" import { Toggle } from "../../components/toggle" import Head from "next/head" import { useTheme } from "next-themes" type SettingsState = { relays: SettingsRelay[] } export default function Settings() { const [settings, setSettings] = useState({ relays: typeof window !== "undefined" ? getRelays() : [], }) const newPool = createRef() const { theme, systemTheme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) const ThemeToggle = () => { if (!mounted) return null const currentTheme = theme === "system" ? systemTheme : theme const isDark = currentTheme === "dark" const toggleHandler = () => setTheme(isDark ? "light" : "dark") return (

Theme

Dark mode

) } return ( <> Sendstr - Settings

Relays

    {settings.relays.map((relay) => (
  • { toggleRelay(relay.url) setSettings({ ...settings, relays: getRelays(), }) }} />
    • ))}
) }