RevelaNetwork/Revelav3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Basic settings

Browse source
This commit is contained in:
rift 2024-07-29 00:05:06 -05:00
parent e91a913b62
commit 5d6b7b74c4
11 changed files with 170 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/fortnite.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

17
src/components/SidebarButton.astro Normal file
View file

@ -0,0 +1,17 @@
---
const { title, route } = Astro.props;
---
<a
href={route}
class="group flex flex-col items-center p-3 bg-navbar-color w-full rounded-3xl md:flex-row md:bg-none md:rounded-none"
>
<div class="p-2">
<slot />
</div>
<div
class="font-roboto text-center font-bold text-text-color roboto transition duration-500 group-hover:text-text-hover-color md:text-xl md:pl-2 text-nowrap"
>
{title}
</div>
</a>

13
src/components/settings/ThemeCard.astro Normal file
View file

@ -0,0 +1,13 @@
---
const { image, title } = Astro.props;
import { Image } from "astro:assets";
---
<div class="rounded-3xl bg-navbar-color w-64 flex flex-col">
<div class="w-full">
<Image src={image} alt="Theme" class="aspect-[16/9] rounded-t-3xl" />
</div>
<div class="h-2/6 text-center content-center p-3 font-semibold">
{title}
</div>
</div>

6
src/i18n/en_US.json
View file

@ -3,5 +3,9 @@
"header.games": "Games",
"header.settings": "Settings",
"header.morelinks": "Want more links?",
"home.placeholder": "Search the web freely"
"home.placeholder": "Search the web freely",
"settings.settings": "Settings",
"settings.appearance": "Appearance",
"settings.proxy": "Proxy",
"settings.tab": "Tab"
}

6
src/i18n/jp.json
View file

@ -3,5 +3,9 @@
"header.games": "ゲーム",
"header.settings": "設定",
"header.morelinks": "リンク一覧",
"home.placeholder": "検索欄"
"home.placeholder": "検索欄",
"settings.settings": "Settings",
"settings.appearance": "Appearance",
"settings.proxy": "Proxy",
"settings.tab": "Tab"
}

2
src/layouts/Layout.astro
View file

@ -26,7 +26,7 @@ const { title } = Astro.props;
<title>{title}</title>
<ViewTransitions />
</head>
<body class="h-full">
<body class="h-full bg-primary">
<Header />
<slot />
<div

42
src/layouts/SettingsLayout.astro
View file

@ -1,9 +1,45 @@
---
import { getLangFromUrl, useTranslations } from "../i18n/utils";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const { title } = Astro.props;
import SidebarButton from "../components/SidebarButton.astro";
import { Icon } from "astro-icon/components";
---
<div>
<p>Settings</p>
<p>{title}</p>
<div class="flex flex-row">
<div
class="text-text-color mt-16 overflow-y-auto fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col flex md:flex-row"
>
<div
class="items-center p-3 flex flex-row border-border-color gap-5 border-r-2 md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0"
>
<SidebarButton
title={t("settings.appearance")}
route={`/${lang}/settings/appearance`}
>
<Icon
name="ph:palette"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
/>
</SidebarButton>
<SidebarButton title={t("settings.proxy")} route={`/${lang}/settings/pr`}>
<Icon
name="ph:globe-hemisphere-east-fill"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
/>
</SidebarButton>
<SidebarButton title={t("settings.tab")} route={`/${lang}/settings/tab/`}>
<Icon
name="ph:laptop-fill"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
/>
</SidebarButton>
</div>
<div class="p-8 md:w-10/12">
<p class="text-5xl font-semibold mb-5">{t("settings.settings")}</p>
<p class="text-2xl">{title}</p>
<slot />
</div>
</div>
</div>

12
src/layouts/SettingsSection.astro Normal file
View file

@ -0,0 +1,12 @@
---
const { title, subtitle } = Astro.props;
---
<div class="mt-5">
<hr />
<div class="mt-3">
<div class="text-2xl font-semibold">{title}</div>
<div class="text-lg mb-5">{subtitle}</div>
<slot />
</div>
</div>

31
src/pages/[lang]/settings/appearance.astro
View file

@ -1,6 +1,14 @@
---
import Layout from "../../../layouts/Layout.astro";
import SettingsLayout from "../../../layouts/SettingsLayout.astro";
import SettingsSection from "../../../layouts/SettingsSection.astro";
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
import ThemeCard from "../../../components/settings/ThemeCard.astro";
import { Icon } from "astro-icon/components";
import fortnite from "../../../assets/fortnite.jpg";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
export function getStaticPaths() {
const STATIC_PATHS = [
{ params: { lang: "en_US" } },
@ -11,7 +19,26 @@ export function getStaticPaths() {
---
<Layout title="Settings">
<SettingsLayout title="Appearance">
<p>Appearance settings here!</p>
<SettingsLayout title={t("settings.appearance")}>
<SettingsSection
title="Theme"
subtitle="Choose a theme so your eyes don't hate us."
>
<div class="flex flex-row flex-wrap gap-4">
<ThemeCard image={fortnite} title="Fortnite.jpg Theme" />
<ThemeCard image={fortnite} title="Fortnite.jpg Theme" />
<ThemeCard image={fortnite} title="Fortnite.jpg Theme" />
<ThemeCard image={fortnite} title="Fortnite.jpg Theme" />
<ThemeCard image={fortnite} title="Fortnite.jpg Theme" />
<div class="rounded-3xl bg-navbar-color w-64 flex flex-col">
<div class="w-full items-center justify-center flex aspect-[16/9]">
<Icon name="ph:plus-bold" class="h-16 w-16" />
</div>
<div class="h-2/6 text-center content-center p-3 font-semibold">
Get more themes in the <strong>Nebula Catalog!</strong>
</div>
</div>
</div>
</SettingsSection>
</SettingsLayout>
</Layout>

24
src/pages/[lang]/settings/pr.astro Normal file
View file

@ -0,0 +1,24 @@
---
import Layout from "../../../layouts/Layout.astro";
import SettingsLayout from "../../../layouts/SettingsLayout.astro";
import SettingsSection from "../../../layouts/SettingsSection.astro";
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
export function getStaticPaths() {
const STATIC_PATHS = [
{ params: { lang: "en_US" } },
{ params: { lang: "jp" } },
];
return STATIC_PATHS;
}
---
<Layout title="Settings">
<SettingsLayout title={t("settings.proxy")}>
<SettingsSection title="Proxy" subtitle="Choose the rewriter/proxy to use."
>Guhh</SettingsSection
>
</SettingsLayout>
</Layout>

24
src/pages/[lang]/settings/tab.astro Normal file
View file

@ -0,0 +1,24 @@
---
import Layout from "../../../layouts/Layout.astro";
import SettingsLayout from "../../../layouts/SettingsLayout.astro";
import SettingsSection from "../../../layouts/SettingsSection.astro";
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
export function getStaticPaths() {
const STATIC_PATHS = [
{ params: { lang: "en_US" } },
{ params: { lang: "jp" } },
];
return STATIC_PATHS;
}
---
<Layout title="Settings">
<SettingsLayout title={t("settings.tab")}>
<SettingsSection title="Tab" subtitle="Customize and cloak your tab."
>Guhh</SettingsSection
>
</SettingsLayout>
</Layout>