External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

create temporary settings view

Browse Source
This commit is contained in:
plebeius.eth
2024-03-20 22:06:35 +01:00
parent 81aa6d2426
commit 262a767aae
8 changed files with 90 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+2
View File
@@ -5,6 +5,7 @@ import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
import styles from './app.module.css';
import useTheme from './hooks/use-theme';
import Home from './views/home';
import Settings from './views/settings';
import Subplebbit from './views/subplebbit';
import BoardNav from './components/board-nav';
import BoardBanner from './components/board-banner';
@@ -54,6 +55,7 @@ const App = () => {
<Route element={<BoardLayout />}>
<Route path='/p/:subplebbitAddress' element={<Subplebbit />} />
</Route>
<Route path='/settings' element={<Settings />} />
</Routes>
</div>
);
src/components/board-nav/board-nav.module.css
+3
View File
@@ -35,6 +35,9 @@
.boardNavMobile select {
font-size: var(--boardnav-mobile-font-size);
border: var(--select-border, revert);
background-color: var(--select-background-color, revert);
color: var(--select-color, revert);
}
.boardSelect {
src/themes.css
+3
View File
@@ -186,6 +186,9 @@
--internal-link-text-color-hover: #5f89ac;
--post-form-toggle-font-size: 22px;
--post-form-toggle-font-weight: 700;
--select-border: 1px solid #575a60;
--select-background-color: #282a2e;
--select-color: #c5c8c6;
--text-color: #c5c8c6;
--text-color-standard: #c5c8c6;
--text-color-on-color1: #c5c8c6;
src/views/settings/index.ts
+1
View File
@@ -0,0 +1 @@
export { default } from './settings';
src/views/settings/settings.module.css
+19
View File
@@ -0,0 +1,19 @@
.content {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
.content select {
background-color: var(--select-background-color, revert);
border: var(--select-border, revert);
color: var(--select-color, revert);
margin: 10px;
}
.content a {
margin: 10px;
margin-bottom: 40px;
display: block;
}
src/views/settings/settings.tsx
+58
View File
@@ -0,0 +1,58 @@
import { useTranslation } from 'react-i18next';
import useTheme from '../../hooks/use-theme';
import styles from './settings.module.css';
import { Link } from 'react-router-dom';
// TODO: remove theme and languages selectors for debugging
const ThemeSettings = () => {
const [theme, setTheme] = useTheme();
return (
<select className={styles.themeSettings} value={theme} onChange={(e) => setTheme(e.target.value)}>
<option value='yotsuba'>Yotsuba</option>
<option value='yotsuba-b'>Yotsuba B</option>
<option value='futaba'>Futaba</option>
<option value='burichan'>Burichan</option>
<option value='tomorrow'>Tomorrow</option>
<option value='photon'>Photon</option>
</select>
);
};
// prettier-ignore
const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh'];
const LanguageSettings = () => {
const { i18n } = useTranslation();
const { changeLanguage, language } = i18n;
const onSelectLanguage = (e: React.ChangeEvent<HTMLSelectElement>) => {
changeLanguage(e.target.value);
};
return (
<div className={styles.languageSettings}>
<select value={language} onChange={onSelectLanguage}>
{availableLanguages.map((lang) => (
<option key={lang} value={lang}>
{lang}
</option>
))}
</select>
</div>
);
};
const Settings = () => {
return (
<div className={styles.content}>
<div>
<Link to='/'>Home</Link>
</div>
<ThemeSettings />
<LanguageSettings />
</div>
);
};
export default Settings;
src/views/subplebbit/subplebbit.module.css
+3
View File
@@ -7,4 +7,7 @@
.debug select {
margin: 2px;
border: var(--select-border);
background-color: var(--select-background-color);
color: var(--select-color);
}
src/views/subplebbit/subplebbit.tsx
+1 -50
View File
@@ -1,56 +1,7 @@
import { useTranslation } from 'react-i18next';
import useTheme from '../../hooks/use-theme';
import styles from './subplebbit.module.css';
// TODO: remove theme and languages selectors for debugging
const ThemeSettings = () => {
const [theme, setTheme] = useTheme();
return (
<select value={theme} onChange={(e) => setTheme(e.target.value)}>
<option value='yotsuba'>Yotsuba</option>
<option value='yotsuba-b'>Yotsuba B</option>
<option value='futaba'>Futaba</option>
<option value='burichan'>Burichan</option>
<option value='tomorrow'>Tomorrow</option>
<option value='photon'>Photon</option>
</select>
);
};
// prettier-ignore
const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh'];
const LanguageSettings = () => {
const { i18n } = useTranslation();
const { changeLanguage, language } = i18n;
const onSelectLanguage = (e: React.ChangeEvent<HTMLSelectElement>) => {
changeLanguage(e.target.value);
};
return (
<div className={styles.languageSettings}>
<select value={language} onChange={onSelectLanguage}>
{availableLanguages.map((lang) => (
<option key={lang} value={lang}>
{lang}
</option>
))}
</select>
</div>
);
};
const Subplebbit = () => {
return (
<div className={styles.content}>
<div className={styles.debug}>
<LanguageSettings />
<ThemeSettings />
</div>
</div>
);
return <div className={styles.content}></div>;
};
export default Subplebbit;