refactor: moving to components
This commit is contained in:
@ -1,48 +1,18 @@
|
||||
import { A, Navigate, Route, Router, useNavigate } from "@solidjs/router";
|
||||
import { type Component, type ParentProps } from "solid-js";
|
||||
import {
|
||||
IconArrowLeft,
|
||||
IconHome,
|
||||
IconPhoto,
|
||||
IconSearch,
|
||||
} from "@tabler/icons-solidjs";
|
||||
import { Entity } from "./Entity";
|
||||
import { Navigate, Route, Router } from "@solidjs/router";
|
||||
import { onAndroidMount } from "./mobile";
|
||||
import { FrontPage, Gallery, ImagePage, Login, Settings } from "./pages";
|
||||
import {
|
||||
FrontPage,
|
||||
Gallery,
|
||||
ImagePage,
|
||||
Login,
|
||||
Settings,
|
||||
Entity,
|
||||
} from "./pages";
|
||||
import { SearchImageContextProvider } from "@contexts/SearchImageContext";
|
||||
import { WithNotifications } from "@contexts/Notifications";
|
||||
import { ProtectedRoute } from "@components/protected-route";
|
||||
|
||||
const AppWrapper: Component<ParentProps> = (props) => {
|
||||
return (
|
||||
<div class="flex w-full justify-center h-screen">{props.children}</div>
|
||||
);
|
||||
};
|
||||
|
||||
const WithDock: Component<ParentProps> = (props) => {
|
||||
const nav = useNavigate();
|
||||
|
||||
return (
|
||||
<div class="w-full flex flex-col items-center">
|
||||
{/* TODO: this should only show up when NOT on the home page. */}
|
||||
<div class="cursor-pointer" onClick={() => nav(-1)}>
|
||||
<IconArrowLeft />
|
||||
</div>
|
||||
{props.children}
|
||||
<div class="w-full mt-auto h-16 bg-white flex justify-between m-4 rounded-xl">
|
||||
<A href="/" class="w-full flex justify-center items-center">
|
||||
<IconHome />
|
||||
</A>
|
||||
<A href="/" class="w-full flex justify-center items-center">
|
||||
<IconSearch />
|
||||
</A>
|
||||
<A href="/" class="w-full flex justify-center items-center">
|
||||
<IconPhoto />
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
import { AppWrapper } from "@components/app-wrapper";
|
||||
import { WithDock } from "@components/dock";
|
||||
|
||||
export const App = () => {
|
||||
onAndroidMount();
|
||||
|
7
frontend/src/components/app-wrapper/index.tsx
Normal file
7
frontend/src/components/app-wrapper/index.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import { Component, ParentProps } from "solid-js";
|
||||
|
||||
export const AppWrapper: Component<ParentProps> = (props) => {
|
||||
return (
|
||||
<div class="flex w-full justify-center h-screen">{props.children}</div>
|
||||
);
|
||||
};
|
33
frontend/src/components/dock/index.tsx
Normal file
33
frontend/src/components/dock/index.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import { A, useNavigate } from "@solidjs/router";
|
||||
import {
|
||||
IconArrowLeft,
|
||||
IconHome,
|
||||
IconPhoto,
|
||||
IconSearch,
|
||||
} from "@tabler/icons-solidjs";
|
||||
import { Component, ParentProps } from "solid-js";
|
||||
|
||||
export const WithDock: Component<ParentProps> = (props) => {
|
||||
const nav = useNavigate();
|
||||
|
||||
return (
|
||||
<div class="w-full flex flex-col items-center">
|
||||
{/* TODO: this should only show up when NOT on the home page. */}
|
||||
<div class="cursor-pointer" onClick={() => nav(-1)}>
|
||||
<IconArrowLeft />
|
||||
</div>
|
||||
{props.children}
|
||||
<div class="w-full mt-auto h-16 bg-white flex justify-between m-4 rounded-xl">
|
||||
<A href="/" class="w-full flex justify-center items-center">
|
||||
<IconHome />
|
||||
</A>
|
||||
<A href="/" class="w-full flex justify-center items-center">
|
||||
<IconSearch />
|
||||
</A>
|
||||
<A href="/" class="w-full flex justify-center items-center">
|
||||
<IconPhoto />
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -3,3 +3,4 @@ export * from "./gallery";
|
||||
export * from "./image";
|
||||
export * from "./settings";
|
||||
export * from "./login";
|
||||
export * from "./entity";
|
||||
|
Reference in New Issue
Block a user