Basic settings
This commit is contained in:
rift
parent
e91a913b62
commit
5d6b7b74c4
11 changed files with 170 additions and 9 deletions
BIN
src/assets/fortnite.jpg
Normal file
BIN
src/assets/fortnite.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
17
src/components/SidebarButton.astro
Normal file
17
src/components/SidebarButton.astro
Normal 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
13
src/components/settings/ThemeCard.astro
Normal 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>
|
||||||
|
|
@ -3,5 +3,9 @@
|
||||||
"header.games": "Games",
|
"header.games": "Games",
|
||||||
"header.settings": "Settings",
|
"header.settings": "Settings",
|
||||||
"header.morelinks": "Want more links?",
|
"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"
|
||||||
}
|
}
|
||||||
|
|
@ -3,5 +3,9 @@
|
||||||
"header.games": "ゲーム",
|
"header.games": "ゲーム",
|
||||||
"header.settings": "設定",
|
"header.settings": "設定",
|
||||||
"header.morelinks": "リンク一覧",
|
"header.morelinks": "リンク一覧",
|
||||||
"home.placeholder": "検索欄"
|
"home.placeholder": "検索欄",
|
||||||
|
"settings.settings": "Settings",
|
||||||
|
"settings.appearance": "Appearance",
|
||||||
|
"settings.proxy": "Proxy",
|
||||||
|
"settings.tab": "Tab"
|
||||||
}
|
}
|
||||||
|
|
@ -26,7 +26,7 @@ const { title } = Astro.props;
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
<ViewTransitions />
|
<ViewTransitions />
|
||||||
</head>
|
</head>
|
||||||
<body class="h-full">
|
<body class="h-full bg-primary">
|
||||||
<Header />
|
<Header />
|
||||||
<slot />
|
<slot />
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,45 @@
|
||||||
---
|
---
|
||||||
|
import { getLangFromUrl, useTranslations } from "../i18n/utils";
|
||||||
|
const lang = getLangFromUrl(Astro.url);
|
||||||
|
const t = useTranslations(lang);
|
||||||
const { title } = Astro.props;
|
const { title } = Astro.props;
|
||||||
|
import SidebarButton from "../components/SidebarButton.astro";
|
||||||
|
import { Icon } from "astro-icon/components";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div>
|
<div class="flex flex-row">
|
||||||
<p>Settings</p>
|
<div
|
||||||
<p>{title}</p>
|
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"
|
||||||
<slot />
|
>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
|
||||||
12
src/layouts/SettingsSection.astro
Normal file
12
src/layouts/SettingsSection.astro
Normal 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>
|
||||||
|
|
@ -1,6 +1,14 @@
|
||||||
---
|
---
|
||||||
import Layout from "../../../layouts/Layout.astro";
|
import Layout from "../../../layouts/Layout.astro";
|
||||||
import SettingsLayout from "../../../layouts/SettingsLayout.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() {
|
export function getStaticPaths() {
|
||||||
const STATIC_PATHS = [
|
const STATIC_PATHS = [
|
||||||
{ params: { lang: "en_US" } },
|
{ params: { lang: "en_US" } },
|
||||||
|
|
@ -11,7 +19,26 @@ export function getStaticPaths() {
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Settings">
|
<Layout title="Settings">
|
||||||
<SettingsLayout title="Appearance">
|
<SettingsLayout title={t("settings.appearance")}>
|
||||||
<p>Appearance settings here!</p>
|
<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>
|
</SettingsLayout>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
24
src/pages/[lang]/settings/pr.astro
Normal file
24
src/pages/[lang]/settings/pr.astro
Normal 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
24
src/pages/[lang]/settings/tab.astro
Normal 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>
|
||||||
Loading…
Add table
Reference in a new issue