The first working Theme Settings
This commit is contained in:
parent
1718c9cf69
commit
f5b1e80c6d
16 changed files with 517 additions and 250 deletions
|
|
@ -1,8 +1,92 @@
|
|||
import React, { useState } from'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
|
||||
const [activeSection, setActiveSection] = useState('general');
|
||||
|
||||
// Theme settings state
|
||||
const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
|
||||
const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
|
||||
const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
|
||||
const [inputButtonColor, setInputButtonColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim());
|
||||
const [inputButtonHoverColor, setInputButtonHoverColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim());
|
||||
const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim());
|
||||
const [userMessageTextColor, setUserMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim());
|
||||
const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim());
|
||||
const [aiMessageTextColor, setAiMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim());
|
||||
const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim());
|
||||
const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim());
|
||||
const [modelsBackgroundColor, setModelsBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim());
|
||||
const [historyBackgroundColor, setHistoryBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim());
|
||||
const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim());
|
||||
const [conversationBackgroundColor, setConversationBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim());
|
||||
const [popUpTextColor, setPopUpTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim());
|
||||
const [inputBorderColor, setInputBorderColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
|
||||
const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
|
||||
const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
|
||||
|
||||
// General settings state
|
||||
const [preferredLanguage, setPreferredLanguage] = useState<string>('English');
|
||||
const [preferredCurrency, setPreferredCurrency] = useState<string>('USD');
|
||||
const [dateFormat, setDateFormat] = useState<string>('MM/DD/YYYY');
|
||||
const [timeFormat, setTimeFormat] = useState<string>('12-hour');
|
||||
const [timeZone, setTimeZone] = useState<string>('UTC');
|
||||
|
||||
// Privacy settings state
|
||||
const [disableOnlineAI, setDisableOnlineAI] = useState<boolean>(false);
|
||||
const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
|
||||
const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
|
||||
|
||||
// FOSS settings state
|
||||
const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);
|
||||
|
||||
// Account settings state
|
||||
const [newName, setNewName] = useState<string>('');
|
||||
const [newEmail, setNewEmail] = useState<string>('');
|
||||
const [newPassword, setNewPassword] = useState<string>('');
|
||||
|
||||
// Effect to update CSS variables on theme state change
|
||||
useEffect(() => {
|
||||
document.documentElement.style.setProperty('--background-color', backgroundColor);
|
||||
document.documentElement.style.setProperty('--text-color', textColor);
|
||||
document.documentElement.style.setProperty('--input-background-color', inputBackgroundColor);
|
||||
document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', inputButtonHoverColor);
|
||||
document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
|
||||
document.documentElement.style.setProperty('--user-message-text-color', userMessageTextColor);
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', aiMessageTextColor);
|
||||
document.documentElement.style.setProperty('--button-background-color', buttonBackgroundColor);
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
|
||||
document.documentElement.style.setProperty('--models-background-color', modelsBackgroundColor);
|
||||
document.documentElement.style.setProperty('--history-background-color', historyBackgroundColor);
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', leftPanelBackgroundColor);
|
||||
document.documentElement.style.setProperty('--conversation-background-color', conversationBackgroundColor);
|
||||
document.documentElement.style.setProperty('--pop-up-text', popUpTextColor);
|
||||
document.documentElement.style.setProperty('--input-border-color', inputBorderColor);
|
||||
document.documentElement.style.setProperty('--font-family', fontFamily);
|
||||
document.documentElement.style.setProperty('--font-size', fontSize);
|
||||
}, [
|
||||
backgroundColor,
|
||||
textColor,
|
||||
inputBackgroundColor,
|
||||
inputButtonColor,
|
||||
inputButtonHoverColor,
|
||||
userMessageBackgroundColor,
|
||||
userMessageTextColor,
|
||||
aiMessageBackgroundColor,
|
||||
aiMessageTextColor,
|
||||
buttonBackgroundColor,
|
||||
buttonHoverBackgroundColor,
|
||||
modelsBackgroundColor,
|
||||
historyBackgroundColor,
|
||||
leftPanelBackgroundColor,
|
||||
conversationBackgroundColor,
|
||||
popUpTextColor,
|
||||
inputBorderColor,
|
||||
fontFamily,
|
||||
fontSize
|
||||
]);
|
||||
|
||||
const renderSettingsContent = () => {
|
||||
switch (activeSection) {
|
||||
case 'general':
|
||||
|
|
@ -10,209 +94,312 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<div className="settings-section">
|
||||
<h2>General Settings</h2>
|
||||
<div className="settings-option">
|
||||
<p>Change Language</p>
|
||||
<select>
|
||||
<option value="en">English</option>
|
||||
<option value="es">Spanish</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="de">German</option>
|
||||
<option value="it">Italian</option>
|
||||
<option value="pt">Portuguese</option>
|
||||
<option value="zh">Chinese</option>
|
||||
<option value="ja">Japanese</option>
|
||||
<option value="ko">Korean</option>
|
||||
<option value="ar">Arabic</option>
|
||||
<option value="ru">Russian</option>
|
||||
<option value="he">Hebrew</option>
|
||||
</select>
|
||||
<label>Preferred Language</label>
|
||||
<input
|
||||
type="text"
|
||||
value={preferredLanguage}
|
||||
onChange={(e) => setPreferredLanguage(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Notifications</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Enable notifications
|
||||
</label>
|
||||
<label>Preferred Currency</label>
|
||||
<input
|
||||
type="text"
|
||||
value={preferredCurrency}
|
||||
onChange={(e) => setPreferredCurrency(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Notification Frequency</p>
|
||||
<select>
|
||||
<option value="instant">Instant</option>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="monthly">Monthly</option>
|
||||
<option value="quarterly">Quarterly</option>
|
||||
<option value="annually">Annually</option>
|
||||
</select>
|
||||
<label>Date Format</label>
|
||||
<input
|
||||
type="text"
|
||||
value={dateFormat}
|
||||
onChange={(e) => setDateFormat(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Time Zone</p>
|
||||
<select>
|
||||
<option value="utc">UTC</option>
|
||||
<option value="est">EST</option>
|
||||
<option value="pst">PST</option>
|
||||
<option value="gmt">GMT</option>
|
||||
<option value="cst">CST</option>
|
||||
<option value="mst">MST</option>
|
||||
<option value="bst">BST</option>
|
||||
<option value="cest">CEST</option>
|
||||
</select>
|
||||
<label>Time Format</label>
|
||||
<input
|
||||
type="text"
|
||||
value={timeFormat}
|
||||
onChange={(e) => setTimeFormat(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Auto-Save</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Enable auto-save
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Auto-Save Frequency</p>
|
||||
<select>
|
||||
<option value="5">Every 5 minutes</option>
|
||||
<option value="10">Every 10 minutes</option>
|
||||
<option value="15">Every 15 minutes</option>
|
||||
<option value="30">Every 30 minutes</option>
|
||||
<option value="60">Every hour</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Default Currency</p>
|
||||
<select>
|
||||
<option value="usd">USD</option>
|
||||
<option value="eur">EUR</option>
|
||||
<option value="gbp">GBP</option>
|
||||
<option value="jpy">JPY</option>
|
||||
<option value="cny">CNY</option>
|
||||
<option value="aud">AUD</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Date Format</p>
|
||||
<select>
|
||||
<option value="mm/dd/yyyy">MM/DD/YYYY</option>
|
||||
<option value="dd/mm/yyyy">DD/MM/YYYY</option>
|
||||
<option value="yyyy-mm-dd">YYYY-MM-DD</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Time Format</p>
|
||||
<select>
|
||||
<option value="12-hour">12-hour clock</option>
|
||||
<option value="24-hour">24-hour clock</option>
|
||||
</select>
|
||||
<label>Time Zone</label>
|
||||
<input
|
||||
type="text"
|
||||
value={timeZone}
|
||||
onChange={(e) => setTimeZone(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'privacy':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Privacy Settings</h2>
|
||||
<div className="settings-option">
|
||||
<p>Data Collection</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Allow data collection
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={disableOnlineAI}
|
||||
onChange={() => setDisableOnlineAI(!disableOnlineAI)}
|
||||
/>
|
||||
Disable Online AI
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Location Access</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Enable location access
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={disableChatHistory}
|
||||
onChange={() => setDisableChatHistory(!disableChatHistory)}
|
||||
/>
|
||||
Disable Chat History Save
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Two-Factor Authentication</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Enable 2FA
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={disableAIMemory}
|
||||
onChange={() => setDisableAIMemory(!disableAIMemory)}
|
||||
/>
|
||||
Disable AI Memory
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Data Export</p>
|
||||
<button>Export Data</button>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Cookie Policy</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Accept cookie policy
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>GDPR Compliance</p>
|
||||
<label>
|
||||
<input type="checkbox" /> I agree to GDPR terms
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>CCPA Compliance</p>
|
||||
<label>
|
||||
<input type="checkbox" /> I agree to CCPA terms
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Biometric Data</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Allow biometric data collection
|
||||
</label>
|
||||
<button onClick={() => {/* Export data logic */}}>Export My Data</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
case 'theme':
|
||||
|
||||
case 'theme':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Theme Settings</h2>
|
||||
<div className="settings-option">
|
||||
<p>Font Size</p>
|
||||
<input
|
||||
type="range"
|
||||
min="12"
|
||||
max="30"
|
||||
value={parseInt(fontSize, 10)} // Ensure value is a number
|
||||
onChange={(e) => {
|
||||
const newSize = `${e.target.value}px`;
|
||||
setFontSize(newSize);
|
||||
document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable
|
||||
}}
|
||||
/>
|
||||
<span>{fontSize}</span>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={backgroundColor}
|
||||
onChange={(e) => setBackgroundColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Text Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={textColor}
|
||||
onChange={(e) => setTextColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Input Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={inputBackgroundColor}
|
||||
onChange={(e) => setInputBackgroundColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Input Button Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={inputButtonColor}
|
||||
onChange={(e) => setInputButtonColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Input Button Hover Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={inputButtonHoverColor}
|
||||
onChange={(e) => setInputButtonHoverColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>User Message Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={userMessageBackgroundColor}
|
||||
onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>User Message Text Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={userMessageTextColor}
|
||||
onChange={(e) => setUserMessageTextColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>AI Message Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={aiMessageBackgroundColor}
|
||||
onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>AI Message Text Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={aiMessageTextColor}
|
||||
onChange={(e) => setAiMessageTextColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Button Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={buttonBackgroundColor}
|
||||
onChange={(e) => setButtonBackgroundColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Button Hover Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={buttonHoverBackgroundColor}
|
||||
onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Models Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={modelsBackgroundColor}
|
||||
onChange={(e) => setModelsBackgroundColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>History Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={historyBackgroundColor}
|
||||
onChange={(e) => setHistoryBackgroundColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Left Panel Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={leftPanelBackgroundColor}
|
||||
onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Conversation Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={conversationBackgroundColor}
|
||||
onChange={(e) => setConversationBackgroundColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Pop-up Text Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={popUpTextColor}
|
||||
onChange={(e) => setPopUpTextColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Input Border Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={inputBorderColor}
|
||||
onChange={(e) => setInputBorderColor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Font Family</p>
|
||||
<select
|
||||
value={fontFamily}
|
||||
onChange={(e) => setFontFamily(e.target.value)}
|
||||
>
|
||||
<option value="'Arial', sans-serif">Arial</option>
|
||||
<option value="'Calibri', sans-serif">Calibri</option>
|
||||
<option value="'Helvetica', sans-serif">Helvetica</option>
|
||||
<option value="'Times New Roman', serif">Times New Roman</option>
|
||||
<option value="'Poppins', sans-serif">Poppins</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'foss':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Theme Settings</h2>
|
||||
<h2>FOSS Settings</h2>
|
||||
<div className="settings-option">
|
||||
<p>Choose Theme Color</p>
|
||||
<input type="color" />
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Font Size</p>
|
||||
<input type="range" min="10" max="30" />
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Background Pattern</p>
|
||||
<select>
|
||||
<option value="solid">Solid</option>
|
||||
<option value="striped">Striped</option>
|
||||
<option value="dots">Dotted</option>
|
||||
<option value="grid">Grid</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Font Family</p>
|
||||
<select>
|
||||
<option value="arial">Arial</option>
|
||||
<option value="calibri">Calibri</option>
|
||||
<option value="helvetica">Helvetica</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Button Style</p>
|
||||
<select>
|
||||
<option value="flat">Flat</option>
|
||||
<option value="raised">Raised</option>
|
||||
<option value="rounded">Rounded</option>
|
||||
</select>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={openSourceMode}
|
||||
onChange={() => setOpenSourceMode(!openSourceMode)}
|
||||
/>
|
||||
Enable Open Source Mode
|
||||
</label>
|
||||
<p>(ONLY OPEN SOURCE MODULES WORK IN THERE)</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'account':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Account Settings</h2>
|
||||
<div className="settings-option">
|
||||
<p>Change Name</p>
|
||||
<input type="text" placeholder="New Name" />
|
||||
<label>Change Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Change Email</p>
|
||||
<input type="email" placeholder="New Email" />
|
||||
<label>Change Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={newEmail}
|
||||
onChange={(e) => setNewEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Change Password</p>
|
||||
<input type="password" placeholder="New Password" />
|
||||
<label>Change Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Delete Account</p>
|
||||
<button>Delete Account</button>
|
||||
<div className="danger-zone">
|
||||
<h3>DANGER ZONE</h3>
|
||||
<button onClick={() => {/* Delete account logic */}}>Delete Account</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
|
@ -227,6 +414,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<li onClick={() => setActiveSection('general')}>General</li>
|
||||
<li onClick={() => setActiveSection('privacy')}>Privacy</li>
|
||||
<li onClick={() => setActiveSection('theme')}>Theme</li>
|
||||
<li onClick={() => setActiveSection('foss')}>FOSS</li>
|
||||
<li onClick={() => setActiveSection('account')}>Account</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -241,4 +429,4 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
export default Settings;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue