titaniumnet-mirror/Nebula
1
0
Fork 0
mirror of https://github.com/NebulaServices/Nebula.git synced 2025-05-14 20:30:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Header/Headerless routes

Browse source
This commit is contained in:
cohenerickson 2023-12-15 09:35:42 -06:00
parent 396e1f7233
commit 6c5a0f33ae
5 changed files with 71 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/HeaderRoute.tsx Normal file
View file

@ -0,0 +1,12 @@
import { Header } from "./Header";
export function HeaderRoute(props: { children: any }) {
return (
<div class="flex h-screen flex-col">
<Header />
<div class="flex-1 bg-primary">
<main class="h-full">{props.children}</main>
</div>
</div>
);
}

17
src/index.tsx
View file

@ -13,18 +13,11 @@ import "./i18n";
export function App() {
return (
<LocationProvider>
<div class="flex h-screen flex-col">
<Header />
<div class="flex-1 bg-primary">
<main class="h-full">
<Router>
<Route path="/" component={Home} />
<Route path="/discord" component={DiscordPage} />
<Route default component={NotFound} />
</Router>
</main>
</div>
</div>
<Router>
<Route path="/" component={Home} />
<Route path="/discord" component={DiscordPage} />
<Route default component={NotFound} />
</Router>
</LocationProvider>
);
}

29
src/pages/Home.tsx
View file

@ -1,23 +1,26 @@
import { useState } from "preact/hooks";
import { useTranslation } from "react-i18next";
import { HeaderRoute } from "../components/HeaderRoute";
export function Home() {
const [isFocused, setIsFocused] = useState(false);
const { t } = useTranslation();
return (
<div class="flex h-full items-center justify-center">
<input
onFocus={(e) => {
setIsFocused(true);
}}
onBlur={(e) => {
setIsFocused(false);
}}
type="text"
class="font-roboto h-14 w-80 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"
placeholder={isFocused ? "" : t("home.placeholder")}
></input>
</div>
<HeaderRoute>
<div class="flex h-full items-center justify-center">
<input
onFocus={(e) => {
setIsFocused(true);
}}
onBlur={(e) => {
setIsFocused(false);
}}
type="text"
class="font-roboto h-14 w-80 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"
placeholder={isFocused ? "" : t("home.placeholder")}
></input>
</div>
</HeaderRoute>
);
}

30
src/pages/_404.tsx
View file

@ -1,22 +1,26 @@
import { useTranslation } from "react-i18next";
import { Link } from "preact-router";
import { HeaderRoute } from "../components/HeaderRoute";
export function NotFound() {
const { t } = useTranslation();
return (
<section class="h-full">
<div class="flex h-full flex-col items-center justify-center">
<img src="/404.png" class="h-72"></img>
<div class="flex flex-col items-center p-6">
<p class="font-roboto text-4xl font-bold">{t("404.text")}</p>
<span class="font-roboto text-3xl">404</span>
<HeaderRoute>
<section class="h-full">
<div class="flex h-full flex-col items-center justify-center">
<img src="/404.png" class="h-72"></img>
<div class="flex flex-col items-center p-6">
<p class="font-roboto text-4xl font-bold">{t("404.text")}</p>
<span class="font-roboto text-3xl">404</span>
</div>
<Link href="/">
<button class="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("404.return")}
</button>
</Link>
</div>
<Link href="/">
<button class="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("404.return")}
</button>
</Link>
</div>
</section>
</section>
</HeaderRoute>
);
}

38
src/pages/discord.tsx
View file

@ -1,25 +1,29 @@
import { useTranslation } from "react-i18next";
import { HeaderRoute } from "../components/HeaderRoute";
export function DiscordPage() {
const { t } = useTranslation();
return (
<section class="h-full">
<div class="flex h-full flex-col items-center justify-center">
<div class="flex flex-col items-center p-6">
<p class="font-roboto text-4xl font-bold">{t("discord.title")}</p>
<span class="font-roboto text-3xl">{t("discord.sub")}</span>
<HeaderRoute>
<section class="h-full">
<div class="flex h-full flex-col items-center justify-center">
<div class="flex flex-col items-center p-6">
<p class="font-roboto text-4xl font-bold">{t("discord.title")}</p>
<span class="font-roboto text-3xl">{t("discord.sub")}</span>
</div>
<a href="https://discord.gg/unblocker" class="p-6">
<button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("discord.button1")}
</button>
</a>
<a href="/" class="p-6">
<button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("discord.button2")}
</button>
</a>
</div>
<a href="https://discord.gg/unblocker" class="p-6">
<button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("discord.button1")}
</button>
</a>
<a href="/" class="p-6">
<button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("discord.button2")}
</button>
</a>
</div>
</section>
</section>
</HeaderRoute>
);
}