mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 01:11:25 +00:00
add swipes
This commit is contained in:
parent
8936502019
commit
7989c20c1a
@ -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",
|
||||
|
@ -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';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
nostr?: any;
|
||||
}
|
||||
}
|
||||
import Settings from './components/Settings';
|
||||
import SwipeableViews from 'react-swipeable-views';
|
||||
|
||||
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>
|
||||
<Route path="/" element={<Home />} />
|
||||
</Routes>
|
||||
<SwipeableViews index={index} onChangeIndex={handleChangeIndex}>
|
||||
<div>
|
||||
<Settings />
|
||||
</div>
|
||||
<div>
|
||||
<Home />
|
||||
</div>
|
||||
</SwipeableViews>
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
|
57
client/src/components/Settings.tsx
Normal file
57
client/src/components/Settings.tsx
Normal file
@ -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;
|
Loading…
Reference in New Issue
Block a user