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