mirror of
https://github.com/NebulaServices/Nebula.git
synced 2025-05-16 21:10:02 -04:00
Merge pull request #249 from MotorTruck1221/mental-breakdown
Mental breakdown (Fix Bare Clients 😭)
This commit is contained in:
rift
GitHub
commit
d3d4736bae
7 changed files with 334 additions and 334 deletions
130
package.json
130
package.json
|
|
@ -1,65 +1,65 @@
|
|||
{
|
||||
"name": "nebula",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "concurrently \"vite\" \"tsx server.ts\"",
|
||||
"build": "vite build",
|
||||
"bstart": "npm run build && tsx server.ts",
|
||||
"start": "tsx server.ts",
|
||||
"preview": "vite preview",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@fastify/compress": "^6.5.0",
|
||||
"@fastify/cookie": "^9.3.1",
|
||||
"@fastify/static": "^6.12.0",
|
||||
"@mercuryworkshop/bare-mux": "^1.0.7",
|
||||
"@mercuryworkshop/epoxy-transport": "^1.1.0",
|
||||
"@mercuryworkshop/libcurl-transport": "^1.3.1",
|
||||
"@nebula-services/dynamic": "0.7.2-patch.2",
|
||||
"@titaniumnetwork-dev/ultraviolet": "^3.0.0",
|
||||
"@tomphttp/bare-server-node": "2.0.3",
|
||||
"@tsparticles/engine": "^3.3.0",
|
||||
"@tsparticles/react": "^3.0.0",
|
||||
"@tsparticles/slim": "^3.3.0",
|
||||
"chalk": "^5.3.0",
|
||||
"classnames": "^2.5.1",
|
||||
"compression": "^1.7.4",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"crypto-js": "^4.2.0",
|
||||
"fastify": "^4.26.2",
|
||||
"fastify-plugin": "^4.5.1",
|
||||
"framer-motion": "^10.18.0",
|
||||
"i18next": "^23.10.1",
|
||||
"i18next-browser-languagedetector": "^7.2.0",
|
||||
"localforage": "^1.10.0",
|
||||
"million": "^2.6.4",
|
||||
"preact": "^10.20.0",
|
||||
"preact-iso": "^2.4.0",
|
||||
"preact-render-to-string": "^6.4.1",
|
||||
"preact-router": "^4.1.2",
|
||||
"rammerhead": "https://github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-i18next": "^13.5.0",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-toastify": "^9.1.3",
|
||||
"tsx": "^4.7.1",
|
||||
"wisp-server-node": "^1.0.4",
|
||||
"ws": "^8.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@preact/preset-vite": "^2.8.2",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"concurrently": "^8.2.2",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-preact": "^1.3.0",
|
||||
"postcss": "^8.4.38",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-tailwindcss": "^0.5.12",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.4.3",
|
||||
"vite": "^5.2.3",
|
||||
"vite-plugin-static-copy": "^1.0.1"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "nebula",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "concurrently \"vite\" \"tsx server.ts\"",
|
||||
"build": "vite build",
|
||||
"bstart": "npm run build && tsx server.ts",
|
||||
"start": "tsx server.ts",
|
||||
"preview": "vite preview",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@fastify/compress": "^6.5.0",
|
||||
"@fastify/cookie": "^9.3.1",
|
||||
"@fastify/static": "^6.12.0",
|
||||
"@mercuryworkshop/bare-mux": "^1.0.7",
|
||||
"@mercuryworkshop/epoxy-transport": "^1.1.0",
|
||||
"@mercuryworkshop/libcurl-transport": "^1.3.1",
|
||||
"@nebula-services/dynamic": "0.7.2-patch.2",
|
||||
"@titaniumnetwork-dev/ultraviolet": "^3.0.0",
|
||||
"@tomphttp/bare-server-node": "2.0.3",
|
||||
"@tsparticles/engine": "^3.3.0",
|
||||
"@tsparticles/react": "^3.0.0",
|
||||
"@tsparticles/slim": "^3.3.0",
|
||||
"chalk": "^5.3.0",
|
||||
"classnames": "^2.5.1",
|
||||
"compression": "^1.7.4",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"crypto-js": "^4.2.0",
|
||||
"fastify": "^4.26.2",
|
||||
"fastify-plugin": "^4.5.1",
|
||||
"framer-motion": "^10.18.0",
|
||||
"i18next": "^23.10.1",
|
||||
"i18next-browser-languagedetector": "^7.2.0",
|
||||
"localforage": "^1.10.0",
|
||||
"million": "^2.6.4",
|
||||
"preact": "^10.20.0",
|
||||
"preact-iso": "^2.4.0",
|
||||
"preact-render-to-string": "^6.4.1",
|
||||
"preact-router": "^4.1.2",
|
||||
"rammerhead": "https://github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-i18next": "^13.5.0",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-toastify": "^9.1.3",
|
||||
"tsx": "^4.7.1",
|
||||
"wisp-server-node": "^1.0.4",
|
||||
"ws": "^8.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@preact/preset-vite": "^2.8.2",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"concurrently": "^8.2.2",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-preact": "^1.3.0",
|
||||
"postcss": "^8.4.38",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-tailwindcss": "^0.5.12",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.4.3",
|
||||
"vite": "^5.2.3",
|
||||
"vite-plugin-static-copy": "^1.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,92 +1,92 @@
|
|||
import { createContext } from "preact";
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
type Theme =
|
||||
| "main"
|
||||
| "hacker"
|
||||
| "catppuccin-mocha"
|
||||
| "catppuccin-macchiato"
|
||||
| "catppuccin-frappe"
|
||||
| "catppuccin-latte";
|
||||
const themes: Theme[] = [
|
||||
"main",
|
||||
"hacker",
|
||||
"catppuccin-mocha",
|
||||
"catppuccin-macchiato",
|
||||
"catppuccin-frappe",
|
||||
"catppuccin-latte"
|
||||
];
|
||||
type ThemeProviderProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
type ThemeProviderState = {
|
||||
themes: Theme[];
|
||||
theme: Theme;
|
||||
background: string;
|
||||
setTheme: (theme: Theme) => void;
|
||||
setBackground: (background: string) => void;
|
||||
};
|
||||
|
||||
const initialState: ThemeProviderState = {
|
||||
themes: themes,
|
||||
theme: "main",
|
||||
background: "",
|
||||
setTheme: () => null,
|
||||
setBackground: () => null
|
||||
};
|
||||
|
||||
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
const defaultTheme = "main";
|
||||
const storageKey = "theme";
|
||||
const bgKey = "background";
|
||||
const [theme, setTheme] = useState<Theme>(
|
||||
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
|
||||
);
|
||||
const [background, setBackground] = useState<string>(() =>
|
||||
localStorage.getItem(bgKey)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
|
||||
themes.forEach((theme) => {
|
||||
root.classList.remove(theme);
|
||||
});
|
||||
root.classList.add(theme);
|
||||
if (background) {
|
||||
document.documentElement.style.setProperty(
|
||||
"--background-image",
|
||||
`url(${background})`
|
||||
);
|
||||
}
|
||||
}, [theme, themes, background]);
|
||||
|
||||
const value = {
|
||||
theme,
|
||||
themes,
|
||||
background,
|
||||
setTheme: (theme: Theme) => {
|
||||
localStorage.setItem(storageKey, theme);
|
||||
setTheme(theme);
|
||||
},
|
||||
setBackground: (background: string) => {
|
||||
localStorage.setItem(bgKey, background);
|
||||
setBackground(background);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProviderContext.Provider {...props} value={value}>
|
||||
{children}
|
||||
</ThemeProviderContext.Provider>
|
||||
);
|
||||
}
|
||||
export const useTheme = () => {
|
||||
const context = useContext(ThemeProviderContext);
|
||||
|
||||
if (context === undefined)
|
||||
throw new Error("useTheme must be used within a ThemeProvider");
|
||||
|
||||
return context;
|
||||
};
|
||||
import { createContext } from "preact";
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
type Theme =
|
||||
| "main"
|
||||
| "hacker"
|
||||
| "catppuccin-mocha"
|
||||
| "catppuccin-macchiato"
|
||||
| "catppuccin-frappe"
|
||||
| "catppuccin-latte";
|
||||
const themes: Theme[] = [
|
||||
"main",
|
||||
"hacker",
|
||||
"catppuccin-mocha",
|
||||
"catppuccin-macchiato",
|
||||
"catppuccin-frappe",
|
||||
"catppuccin-latte"
|
||||
];
|
||||
type ThemeProviderProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
type ThemeProviderState = {
|
||||
themes: Theme[];
|
||||
theme: Theme;
|
||||
background: string;
|
||||
setTheme: (theme: Theme) => void;
|
||||
setBackground: (background: string) => void;
|
||||
};
|
||||
|
||||
const initialState: ThemeProviderState = {
|
||||
themes: themes,
|
||||
theme: "main",
|
||||
background: "",
|
||||
setTheme: () => null,
|
||||
setBackground: () => null
|
||||
};
|
||||
|
||||
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
const defaultTheme = "main";
|
||||
const storageKey = "theme";
|
||||
const bgKey = "background";
|
||||
const [theme, setTheme] = useState<Theme>(
|
||||
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
|
||||
);
|
||||
const [background, setBackground] = useState<string>(() =>
|
||||
localStorage.getItem(bgKey)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
|
||||
themes.forEach((theme) => {
|
||||
root.classList.remove(theme);
|
||||
});
|
||||
root.classList.add(theme);
|
||||
if (background) {
|
||||
document.documentElement.style.setProperty(
|
||||
"--background-image",
|
||||
`url(${background})`
|
||||
);
|
||||
}
|
||||
}, [theme, themes, background]);
|
||||
|
||||
const value = {
|
||||
theme,
|
||||
themes,
|
||||
background,
|
||||
setTheme: (theme: Theme) => {
|
||||
localStorage.setItem(storageKey, theme);
|
||||
setTheme(theme);
|
||||
},
|
||||
setBackground: (background: string) => {
|
||||
localStorage.setItem(bgKey, background);
|
||||
setBackground(background);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProviderContext.Provider {...props} value={value}>
|
||||
{children}
|
||||
</ThemeProviderContext.Provider>
|
||||
);
|
||||
}
|
||||
export const useTheme = () => {
|
||||
const context = useContext(ThemeProviderContext);
|
||||
|
||||
if (context === undefined)
|
||||
throw new Error("useTheme must be used within a ThemeProvider");
|
||||
|
||||
return context;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export function Home() {
|
|||
const firstLoad = localStorage.getItem("firstLoad") || "true";
|
||||
console.log(firstLoad);
|
||||
//make sure service workers are updated
|
||||
updateServiceWorkers();
|
||||
//updateServiceWorkers();
|
||||
//make sure transport is set
|
||||
//setTransport();
|
||||
if (firstLoad == "true" && prod) {
|
||||
|
|
|
|||
|
|
@ -1,104 +1,104 @@
|
|||
import { motion } from "framer-motion";
|
||||
import { tabContentVariant, settingsPageVariant } from "./Variants";
|
||||
import Dropdown from "./Dropdown";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { PersonCard } from "./PersonCard";
|
||||
|
||||
export const Credits = ({ id, active }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
role="tabpanel"
|
||||
id={id}
|
||||
className="tab-content"
|
||||
variants={tabContentVariant}
|
||||
animate={active ? "active" : "inactive"}
|
||||
initial="inactive"
|
||||
>
|
||||
<motion.div
|
||||
variants={settingsPageVariant}
|
||||
className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
|
||||
>
|
||||
<div className="w-full p-10 text-input-text">
|
||||
<div className="py-3">
|
||||
<p className="text-4xl">{t("credits.devs")}</p>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<PersonCard
|
||||
name="Riftriot"
|
||||
url="https://github.com/riftriot/"
|
||||
profile="https://avatars.githubusercontent.com/u/117926989?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="MotorTruck1221"
|
||||
url="https://github.com/MotorTruck1221"
|
||||
profile="https://avatars.githubusercontent.com/u/73721704?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="Cohen"
|
||||
url="https://github.com/cohenerickson"
|
||||
profile="https://avatars.githubusercontent.com/u/72945444?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="FireStreaker2"
|
||||
url="https://github.com/FireStreaker2"
|
||||
profile="https://avatars.githubusercontent.com/u/103970465?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="wearr"
|
||||
url="https://github.com/wearrrrr"
|
||||
profile="https://avatars.githubusercontent.com/u/99224452?v=4"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-12 text-4xl">{t("credits.jpTranslators")}</p>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<PersonCard
|
||||
name="ProgrammerIn-wonderland"
|
||||
url="https://github.com/ProgrammerIn-wonderland"
|
||||
profile="https://avatars.githubusercontent.com/u/30693865?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="wearr"
|
||||
url="https://github.com/wearrrrr"
|
||||
profile="https://avatars.githubusercontent.com/u/99224452?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="suzumiya39"
|
||||
url="https://github.com/suzumiya39"
|
||||
profile="https://avatars.githubusercontent.com/u/165246341?v=4"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-12 text-4xl">{t("credits.esTranslators")}</p>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<PersonCard
|
||||
name="Cohen"
|
||||
url="https://github.com/cohenerickson"
|
||||
profile="https://avatars.githubusercontent.com/u/72945444?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="Notplayingallday383"
|
||||
url="https://github.com/Notplayingallday383"
|
||||
profile="https://avatars.githubusercontent.com/u/72810050?v=4"
|
||||
/>
|
||||
</div>
|
||||
<a href="https://github.com/titaniumnetwork-dev/Ultraviolet">
|
||||
<p className="mt-12 text-4xl underline">Ultraviolet</p>
|
||||
</a>
|
||||
<a href="https://github.com/binary-person/Rammerhead">
|
||||
<p className="mt-12 text-4xl underline">Rammerhead</p>
|
||||
</a>
|
||||
<a href="https://github.com/nebulaservices/dynamic">
|
||||
<p className="mt-12 text-4xl underline">Dynamic</p>
|
||||
</a>
|
||||
<a href="https://github.com/MercuryWorkshop/epoxy-tls">
|
||||
<p className="mt-12 text-4xl underline">epoxy-tls</p>
|
||||
</a>
|
||||
<a href="https://github.com/MercuryWorkshop/libcurl.js">
|
||||
<p className="mt-12 text-4xl underline">libcurl.js</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
import { motion } from "framer-motion";
|
||||
import { tabContentVariant, settingsPageVariant } from "./Variants";
|
||||
import Dropdown from "./Dropdown";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { PersonCard } from "./PersonCard";
|
||||
|
||||
export const Credits = ({ id, active }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
role="tabpanel"
|
||||
id={id}
|
||||
className="tab-content"
|
||||
variants={tabContentVariant}
|
||||
animate={active ? "active" : "inactive"}
|
||||
initial="inactive"
|
||||
>
|
||||
<motion.div
|
||||
variants={settingsPageVariant}
|
||||
className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
|
||||
>
|
||||
<div className="w-full p-10 text-input-text">
|
||||
<div className="py-3">
|
||||
<p className="text-4xl">{t("credits.devs")}</p>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<PersonCard
|
||||
name="Riftriot"
|
||||
url="https://github.com/riftriot/"
|
||||
profile="https://avatars.githubusercontent.com/u/117926989?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="MotorTruck1221"
|
||||
url="https://github.com/MotorTruck1221"
|
||||
profile="https://avatars.githubusercontent.com/u/73721704?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="Cohen"
|
||||
url="https://github.com/cohenerickson"
|
||||
profile="https://avatars.githubusercontent.com/u/72945444?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="FireStreaker2"
|
||||
url="https://github.com/FireStreaker2"
|
||||
profile="https://avatars.githubusercontent.com/u/103970465?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="wearr"
|
||||
url="https://github.com/wearrrrr"
|
||||
profile="https://avatars.githubusercontent.com/u/99224452?v=4"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-12 text-4xl">{t("credits.jpTranslators")}</p>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<PersonCard
|
||||
name="ProgrammerIn-wonderland"
|
||||
url="https://github.com/ProgrammerIn-wonderland"
|
||||
profile="https://avatars.githubusercontent.com/u/30693865?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="wearr"
|
||||
url="https://github.com/wearrrrr"
|
||||
profile="https://avatars.githubusercontent.com/u/99224452?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="suzumiya39"
|
||||
url="https://github.com/suzumiya39"
|
||||
profile="https://avatars.githubusercontent.com/u/165246341?v=4"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-12 text-4xl">{t("credits.esTranslators")}</p>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<PersonCard
|
||||
name="Cohen"
|
||||
url="https://github.com/cohenerickson"
|
||||
profile="https://avatars.githubusercontent.com/u/72945444?v=4"
|
||||
/>
|
||||
<PersonCard
|
||||
name="Notplayingallday383"
|
||||
url="https://github.com/Notplayingallday383"
|
||||
profile="https://avatars.githubusercontent.com/u/72810050?v=4"
|
||||
/>
|
||||
</div>
|
||||
<a href="https://github.com/titaniumnetwork-dev/Ultraviolet">
|
||||
<p className="mt-12 text-4xl underline">Ultraviolet</p>
|
||||
</a>
|
||||
<a href="https://github.com/binary-person/Rammerhead">
|
||||
<p className="mt-12 text-4xl underline">Rammerhead</p>
|
||||
</a>
|
||||
<a href="https://github.com/nebulaservices/dynamic">
|
||||
<p className="mt-12 text-4xl underline">Dynamic</p>
|
||||
</a>
|
||||
<a href="https://github.com/MercuryWorkshop/epoxy-tls">
|
||||
<p className="mt-12 text-4xl underline">epoxy-tls</p>
|
||||
</a>
|
||||
<a href="https://github.com/MercuryWorkshop/libcurl.js">
|
||||
<p className="mt-12 text-4xl underline">libcurl.js</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
interface props {
|
||||
name: string;
|
||||
url: string;
|
||||
profile: string;
|
||||
}
|
||||
|
||||
export const PersonCard = (props) => {
|
||||
return (
|
||||
<div class="mr-8 flex flex-row">
|
||||
<p className="text-lg">
|
||||
<a href={props.url} class="underline">
|
||||
<img src={props.profile} className="h-12 w-12 rounded-md" />
|
||||
{props.name}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
interface props {
|
||||
name: string;
|
||||
url: string;
|
||||
profile: string;
|
||||
}
|
||||
|
||||
export const PersonCard = (props) => {
|
||||
return (
|
||||
<div class="mr-8 flex flex-row">
|
||||
<p className="text-lg">
|
||||
<a href={props.url} class="underline">
|
||||
<img src={props.profile} className="h-12 w-12 rounded-md" />
|
||||
{props.name}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,53 +1,53 @@
|
|||
import { useState } from "preact/hooks";
|
||||
import { FaAngleDown } from "react-icons/fa";
|
||||
import { useTheme } from "../../components/ThemeProvider";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const ThemeDropdown = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { t } = useTranslation();
|
||||
const { theme, setTheme, themes } = useTheme();
|
||||
const options = themes.map((theme) => {
|
||||
return { id: theme, label: t(`themes.${theme}`) };
|
||||
});
|
||||
return (
|
||||
<div className="relative text-center">
|
||||
<div
|
||||
className={`font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center border border-input-border-color bg-input text-center text-xl ${
|
||||
isOpen ? "rounded-t-2xl" : "rounded-2xl"
|
||||
}`}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<div className="flex h-full w-full select-none flex-row items-center">
|
||||
<div className="h-full w-1/4"></div>
|
||||
<div className="flex w-2/4 flex-row items-center justify-center text-input-text">
|
||||
{options.find((o) => o.id === theme)?.label}
|
||||
</div>
|
||||
<div className="flex w-1/4 flex-col items-center text-input-text">
|
||||
<FaAngleDown />
|
||||
</div>
|
||||
</div>
|
||||
{isOpen && (
|
||||
<div className="absolute top-full w-full">
|
||||
{options.map((option, index) => (
|
||||
<div
|
||||
key={option.id}
|
||||
className={`flex flex-row justify-center border border-input-border-color bg-input p-2 text-input-text hover:bg-dropdown-option-hover-color ${
|
||||
index === options.length - 1 ? "rounded-b-2xl" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
setTheme(option.id);
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeDropdown;
|
||||
import { useState } from "preact/hooks";
|
||||
import { FaAngleDown } from "react-icons/fa";
|
||||
import { useTheme } from "../../components/ThemeProvider";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const ThemeDropdown = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { t } = useTranslation();
|
||||
const { theme, setTheme, themes } = useTheme();
|
||||
const options = themes.map((theme) => {
|
||||
return { id: theme, label: t(`themes.${theme}`) };
|
||||
});
|
||||
return (
|
||||
<div className="relative text-center">
|
||||
<div
|
||||
className={`font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center border border-input-border-color bg-input text-center text-xl ${
|
||||
isOpen ? "rounded-t-2xl" : "rounded-2xl"
|
||||
}`}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<div className="flex h-full w-full select-none flex-row items-center">
|
||||
<div className="h-full w-1/4"></div>
|
||||
<div className="flex w-2/4 flex-row items-center justify-center text-input-text">
|
||||
{options.find((o) => o.id === theme)?.label}
|
||||
</div>
|
||||
<div className="flex w-1/4 flex-col items-center text-input-text">
|
||||
<FaAngleDown />
|
||||
</div>
|
||||
</div>
|
||||
{isOpen && (
|
||||
<div className="absolute top-full w-full">
|
||||
{options.map((option, index) => (
|
||||
<div
|
||||
key={option.id}
|
||||
className={`flex flex-row justify-center border border-input-border-color bg-input p-2 text-input-text hover:bg-dropdown-option-hover-color ${
|
||||
index === options.length - 1 ? "rounded-b-2xl" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
setTheme(option.id);
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeDropdown;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default function Routes() {
|
|||
setTransport();
|
||||
});
|
||||
navigator.serviceWorker.register("/sw.js", {
|
||||
scope: "/~/"
|
||||
scope: "/"
|
||||
});
|
||||
}
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue