add swipes

client/package.json

@@ -11,11 +11,13 @@
     "@types/node": "^17.0.45",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
+    "@types/react-swipeable-views": "^0.13.2",
     "nostr-tools": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
+    "react-swipeable-views": "^0.14.0",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.6.0",
     "workbox-broadcast-update": "^6.6.0",

client/src/App.tsx

@@ -1,25 +1,30 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Home from './components/Home';
-
+import Settings from './components/Settings';
-declare global {
+import SwipeableViews from 'react-swipeable-views';
-  interface Window {
-    nostr?: any;
-  }
-}
 
 function App() {
+  const [index, setIndex] = React.useState(1);
+
+  const handleChangeIndex = (index: number) => {
+    console.log("Changed index to:", index);  // Add a log to see if this function is called
+    setIndex(index);
+  };
+
   return (
-    <Router>
     <div>
-        <Routes>
+      <SwipeableViews index={index} onChangeIndex={handleChangeIndex}>
-          <Route path="/" element={<Home />} />
+        <div>
-        </Routes>
+          <Settings />
+        </div>
+        <div>
+          <Home />
+        </div>
+      </SwipeableViews>
     </div>
-    </Router>
   );
 }
 
 export default App;
+

client/src/components/Settings.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+
+const Settings = () => {
+  // State variables to hold the settings
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [username, setUsername] = useState('');
+
+  // Mimic fetching existing settings from an API or local storage
+  useEffect(() => {
+    // Simulate fetching existing settings
+    const existingSettings = {
+      isDarkMode: false, // replace with actual value
+      username: '' // replace with actual value
+    };
+    setIsDarkMode(existingSettings.isDarkMode);
+    setUsername(existingSettings.username);
+  }, []);
+
+  // Function to save changes (simulate API call or local storage update)
+  const saveChanges = () => {
+    // Replace this with an actual API call or local storage update
+    console.log('Dark Mode:', isDarkMode);
+    console.log('Username:', username);
+  };
+
+  return (
+    <div className="settings-page">
+      <h1>Settings</h1>
+
+      <div className="setting-item">
+        <label>
+          Dark Mode
+          <input
+            type="checkbox"
+            checked={isDarkMode}
+            onChange={(e) => setIsDarkMode(e.target.checked)}
+          />
+        </label>
+      </div>
+
+      <div className="setting-item">
+        <label>
+          Username
+          <input
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+        </label>
+      </div>
+
+      <button onClick={saveChanges}>Save Changes</button>
+    </div>
+  );
+};
+
+export default Settings;