themes moved to separate file

PPLBandage · Jan 4, 2025 · 28366fe · 28366fe
1 parent 49c5ee0
commit 28366fe
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 60 deletions.
diff --git a/src/app/me/settings/page.tsx b/src/app/me/settings/page.tsx
@@ -33,6 +33,7 @@ import ApiManager from '@/app/modules/utils/apiManager';
 import { Session } from '@/app/interfaces';
 import { setTheme } from './setTheme';
 import MinecraftConnect from '@/app/modules/components/MinecraftConnect';
+import themes from '@/app/themes';
 const fira = Fira_Code({ subsets: ["latin"] });
 
 export interface SettingsResponse {
@@ -236,35 +237,35 @@ const Connections = ({ data, refetch }: { data: SettingsResponse, refetch(): voi
 }
 
 const Themes = () => {
-    const theme_default = getTheme('default');
-    const theme_amoled = getTheme('amoled');
-    const [themeState, setThemeState] = useState<string>(useCookie('theme_main') || 'default');
+    const themeCookie = useCookie('theme_main');
+    const [themeState, setThemeState] = useState<string>(themeCookie || 'default');
+
+    useEffect(() => setThemeState(themeCookie), [themeCookie]);
 
     const change_theme = (name: string) => {
         setThemeState(name);
         setTheme(name);
     }
 
+    const themesEl = Object.entries(themes)
+        .map(entry =>
+            <Theme
+                key={entry[0]}
+                data={{
+                    name: entry[0],
+                    title: entry[1].title,
+                    ...entry[1].data
+                }}
+                theme={themeState}
+                onChange={change_theme}
+            />
+        );
+
     return (
         <div className={Style.container} style={{ paddingBottom: 'calc(1rem - 10px)' }}>
             <h3><IconPalette width={24} height={24} />Внешний вид</h3>
             <div className={Style_themes.parent}>
-                <Theme data={{
-                    name: 'default',
-                    title: 'Default',
-                    ...theme_default
-                }}
-                    theme={themeState}
-                    onChange={change_theme}
-                />
-                <Theme data={{
-                    name: 'amoled',
-                    title: 'Amoled',
-                    ...theme_amoled
-                }}
-                    theme={themeState}
-                    onChange={change_theme}
-                />
+                {themesEl}
             </div>
         </div>
     );

diff --git a/src/app/me/settings/setTheme.ts b/src/app/me/settings/setTheme.ts
@@ -2,9 +2,9 @@ import { getTheme } from "@/app/modules/providers";
 import { setCookie } from "cookies-next";
 
 export const setTheme = (name: string) => {
-    const theme: { [key: string]: string } = getTheme(name);
+    const theme = getTheme(name);
     setCookie('theme_main', name, { maxAge: 60 * 24 * 365 * 10 });
-    for (let prop in theme) {
-        document.documentElement.style.setProperty(prop, theme[prop]);
-    }
+    Object.entries(theme.data)
+        .map(entry => document.documentElement.style.setProperty(entry[0], entry[1] as any));
+
 }
diff --git a/src/app/modules/components/Footer.tsx b/src/app/modules/components/Footer.tsx
@@ -6,21 +6,22 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useCookiesServer } from "../utils/CookiesProvider/CookieProvider";
+import themes from "@/app/themes";
 
 const Footer = () => {
     const path = usePathname();
     const cookiesServer = useCookiesServer();
-    const themes = ['default', 'amoled'];
-    const initialThemeIndex = themes.indexOf(cookiesServer.get('theme_main') || 'default');
+    const themesKeys = Object.keys(themes);
+    const initialThemeIndex = themesKeys.indexOf(cookiesServer.get('theme_main') || 'default');
     const [theme, setTheme_] = useState<number>(initialThemeIndex !== -1 ? initialThemeIndex : 0);
 
     useEffect(() => {
-        if (theme > themes.length - 1) {
+        if (theme > themesKeys.length - 1) {
             setTheme_(0);
             return;
         }
 
-        setTheme(themes[theme]);
+        setTheme(themesKeys[theme]);
     }, [theme]);
 
     if (path === '/') return null;

diff --git a/src/app/modules/providers.tsx b/src/app/modules/providers.tsx
@@ -5,51 +5,25 @@ import { Inter } from "next/font/google";
 import { CSSProperties } from "react";
 import WorkshopCacheListener from "./utils/workshopCacheListener";
 import { useCookiesServer } from "./utils/CookiesProvider/CookieProvider";
+import themes from '@/app/themes';
 
 const queryClient = new QueryClient();
 const inter = Inter({ subsets: ["latin"] });
 
 export const getTheme = (theme: string) => {
-    switch (theme) {
-        case 'amoled':
-            return {
-                '--main-bg-color': '#000000',
-                '--main-card-color': '#101013',
-                '--main-element-color': '#222329',
-                '--main-action-color': '#00ADB5',
-                '--main-menu-color': '#101013',
-                '--dark-hover': '#1d2025',
-                '--hr-color': '#292c33',
-                '--focus-color': '#717b91',
-                '--category-color': '#333845',
-                '--main-text-color': '#ffffff',
-                '--main-shadow-color': '#121212'
-            }
-        default:
-            return {
-                '--main-bg-color': '#17181c',
-                '--main-card-color': '#262930',
-                '--main-element-color': '#434957',
-                '--main-action-color': '#00ADB5',
-                '--main-menu-color': '#252a30',
-                '--dark-hover': '#1d2025',
-                '--hr-color': '#596172',
-                '--focus-color': '#717b91',
-                '--category-color': '#717b91',
-                '--main-text-color': '#ffffff',
-                '--main-shadow-color': '#1d2025'
-            }
-    }
+    const keys = Object.keys(themes);
+    if (!keys.includes(theme)) return themes.default;
+
+    return themes[theme];
 }
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
     const cookie = useCookiesServer();
-    const theme_cookie = cookie.get('theme_main') || 'default';
+    const theme = getTheme(cookie.get('theme_main') || 'default');
 
-    const theme = getTheme(theme_cookie as string);
     return (
         <QueryClientProvider client={queryClient}>
-            <html lang="ru" className={inter.className} style={theme as CSSProperties}>
+            <html lang="ru" className={inter.className} style={theme.data as CSSProperties}>
                 <WorkshopCacheListener />
                 {children}
             </html>

diff --git a/src/app/themes.ts b/src/app/themes.ts
@@ -0,0 +1,38 @@
+type ThemeType = { [key: string]: { title: string, data: any } };
+
+const themes: ThemeType = {
+    default: {
+        title: 'Default',
+        data: {
+            '--main-bg-color': '#17181c',
+            '--main-card-color': '#262930',
+            '--main-element-color': '#434957',
+            '--main-action-color': '#00ADB5',
+            '--main-menu-color': '#252a30',
+            '--dark-hover': '#1d2025',
+            '--hr-color': '#596172',
+            '--focus-color': '#717b91',
+            '--category-color': '#717b91',
+            '--main-text-color': '#ffffff',
+            '--main-shadow-color': '#1d2025'
+        }
+    },
+    amoled: {
+        title: 'Amoled',
+        data: {
+            '--main-bg-color': '#000000',
+            '--main-card-color': '#101013',
+            '--main-element-color': '#222329',
+            '--main-action-color': '#00ADB5',
+            '--main-menu-color': '#101013',
+            '--dark-hover': '#1d2025',
+            '--hr-color': '#292c33',
+            '--focus-color': '#717b91',
+            '--category-color': '#333845',
+            '--main-text-color': '#ffffff',
+            '--main-shadow-color': '#121212'
+        }
+    }
+}
+
+export default themes;