titaniumnet-mirror/Nebula
1
0
Fork 0
mirror of https://github.com/NebulaServices/Nebula.git synced 2025-05-15 04:40:00 -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() { export function App() {
return ( return (
<LocationProvider> <LocationProvider>
<div class="flex h-screen flex-col"> <Router>
<Header /> <Route path="/" component={Home} />
<div class="flex-1 bg-primary"> <Route path="/discord" component={DiscordPage} />
<main class="h-full"> <Route default component={NotFound} />
<Router> </Router>
<Route path="/" component={Home} />
<Route path="/discord" component={DiscordPage} />
<Route default component={NotFound} />
</Router>
</main>
</div>
</div>
</LocationProvider> </LocationProvider>
); );
} }

29
src/pages/Home.tsx
View file

@ -1,23 +1,26 @@
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { HeaderRoute } from "../components/HeaderRoute";
export function Home() { export function Home() {
const [isFocused, setIsFocused] = useState(false); const [isFocused, setIsFocused] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div class="flex h-full items-center justify-center"> <HeaderRoute>
<input <div class="flex h-full items-center justify-center">
onFocus={(e) => { <input
setIsFocused(true); onFocus={(e) => {
}} setIsFocused(true);
onBlur={(e) => { }}
setIsFocused(false); 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" type="text"
placeholder={isFocused ? "" : t("home.placeholder")} 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"
></input> placeholder={isFocused ? "" : t("home.placeholder")}
</div> ></input>
</div>
</HeaderRoute>
); );
} }

30
src/pages/_404.tsx
View file

@ -1,22 +1,26 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "preact-router"; import { Link } from "preact-router";
import { HeaderRoute } from "../components/HeaderRoute";
export function NotFound() { export function NotFound() {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<section class="h-full"> <HeaderRoute>
<div class="flex h-full flex-col items-center justify-center"> <section class="h-full">
<img src="/404.png" class="h-72"></img> <div class="flex h-full flex-col items-center justify-center">
<div class="flex flex-col items-center p-6"> <img src="/404.png" class="h-72"></img>
<p class="font-roboto text-4xl font-bold">{t("404.text")}</p> <div class="flex flex-col items-center p-6">
<span class="font-roboto text-3xl">404</span> <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> </div>
<Link href="/"> </section>
<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"> </HeaderRoute>
{t("404.return")}
</button>
</Link>
</div>
</section>
); );
} }

38
src/pages/discord.tsx
View file

@ -1,25 +1,29 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { HeaderRoute } from "../components/HeaderRoute";
export function DiscordPage() { export function DiscordPage() {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<section class="h-full"> <HeaderRoute>
<div class="flex h-full flex-col items-center justify-center"> <section class="h-full">
<div class="flex flex-col items-center p-6"> <div class="flex h-full flex-col items-center justify-center">
<p class="font-roboto text-4xl font-bold">{t("discord.title")}</p> <div class="flex flex-col items-center p-6">
<span class="font-roboto text-3xl">{t("discord.sub")}</span> <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> </div>
<a href="https://discord.gg/unblocker" class="p-6"> </section>
<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"> </HeaderRoute>
{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>
); );
} }