amarth/customer-portal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Chris Kruining 2025-09-16 15:54:26 +02:00
commit 33aaf78f7d
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
20 changed files with 433 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/app.tsx Normal file
View file

@ -0,0 +1,23 @@
import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import { ThemeContextProvider } from "./features/theme";
import "./app.css";
export default function App() {
return (
<Router
root={(props) => (
<MetaProvider>
<Title>Amarth Portal</Title>
<Suspense>
<ThemeContextProvider>{props.children}</ThemeContextProvider>
</Suspense>
</MetaProvider>
)}
>
<FileRoutes />
</Router>
);
}

21
src/components/Counter.css Normal file
View file

@ -0,0 +1,21 @@
.increment {
font-family: inherit;
font-size: inherit;
padding: 1em 2em;
color: #335d92;
background-color: rgba(68, 107, 158, 0.1);
border-radius: 2em;
border: 2px solid rgba(68, 107, 158, 0);
outline: none;
width: 200px;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.increment:focus {
border: 2px solid #335d92;
}
.increment:active {
background-color: rgba(68, 107, 158, 0.2);
}

11
src/components/Counter.tsx Normal file
View file

@ -0,0 +1,11 @@
import { createSignal } from "solid-js";
import "./Counter.css";
export default function Counter() {
const [count, setCount] = createSignal(0);
return (
<button class="increment" onClick={() => setCount(count() + 1)} type="button">
Clicks: {count()}
</button>
);
}

4
src/entry-client.tsx Normal file
View file

@ -0,0 +1,4 @@
// @refresh reload
import { mount, StartClient } from "@solidjs/start/client";
mount(() => <StartClient />, document.getElementById("app")!);

21
src/entry-server.tsx Normal file
View file

@ -0,0 +1,21 @@
// @refresh reload
import { createHandler, StartServer } from "@solidjs/start/server";
export default createHandler(() => (
<StartServer
document={({ assets, children, scripts }) => (
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
{assets}
</head>
<body>
<div id="app">{children}</div>
{scripts}
</body>
</html>
)}
/>
));

88
src/features/theme/context.ts Normal file
View file

@ -0,0 +1,88 @@
import {
ContextProviderProps,
createContextProvider,
} from "@solid-primitives/context";
import { action, createAsyncStore, query, useAction } from "@solidjs/router";
import { createStore } from "solid-js/store";
import { useSession } from "vinxi/http";
export enum ColorScheme {
Auto = "light dark",
Light = "light",
Dark = "dark",
}
export interface State {
colorScheme: ColorScheme;
hue: number;
}
const getSession = async () => {
"use server";
return useSession<State>({
password: process.env.SESSION_SECRET!,
});
};
export const getState = query(async () => {
"use server";
const session = await getSession();
if (Object.getOwnPropertyNames(session.data).length === 0) {
await session.update({
colorScheme: ColorScheme.Auto,
hue: 0,
});
}
return session.data;
}, "color-scheme");
const setState = action(async (state: State) => {
"use server";
const session = await getSession();
await session.update((prev) => ({ ...prev, ...state }));
}, "color-scheme");
interface ThemeContextType {
readonly theme: State;
setColorScheme(colorScheme: ColorScheme): void;
setHue(colorScheme: number): void;
}
const [ThemeContextProvider, useTheme] = createContextProvider<
ThemeContextType,
ContextProviderProps
>(
(props) => {
const updateState = useAction(setState);
const state = createAsyncStore(() => getState());
return {
get theme() {
return state.latest ?? { colorScheme: null };
},
setColorScheme(colorScheme) {
// updateState({ colorScheme, hue: state.latest!.hue });
},
setHue(hue) {
// updateState({ hue, colorScheme: state.latest!.colorScheme });
},
};
},
{
theme: {
colorScheme: ColorScheme.Auto,
hue: 180,
},
setColorScheme(colorScheme) {},
setHue(hue) {},
},
);
export { ThemeContextProvider, useTheme };

4
src/features/theme/index.ts Normal file
View file

@ -0,0 +1,4 @@
export { ThemeContextProvider, useTheme } from './context';
export { ColorSchemePicker } from './picker';

9
src/features/theme/picker.module.css Normal file
View file

@ -0,0 +1,9 @@
.picker {
grid-template-columns: auto 1fr;
}
.hue {
display: flex;
flex-flow: row;
align-items: center;
}

69
src/features/theme/picker.tsx Normal file
View file

@ -0,0 +1,69 @@
import {
WiMoonAltFirstQuarter,
WiMoonAltFull,
WiMoonAltNew,
} from "solid-icons/wi";
import {
Component,
createEffect,
For,
Match,
on,
Setter,
Switch,
} from "solid-js";
import { ColorScheme, useTheme } from "./context";
import css from "./picker.module.css";
import { Select } from "~/components/select";
const colorSchemes: Record<ColorScheme, keyof typeof ColorScheme> =
Object.fromEntries(
Object.entries(ColorScheme).map(([k, v]) => [v, k])
) as any;
export const ColorSchemePicker: Component = (props) => {
const themeContext = useTheme();
const setScheme: Setter<ColorScheme> = (next) => {
if (typeof next === "function") {
next = next();
}
themeContext.setColorScheme(next);
};
return (
<>
<label aria-label="Color scheme picker">
<Select
id="color-scheme-picker"
class={css.picker}
value={themeContext.theme.colorScheme}
setValue={setScheme}
values={colorSchemes}
>
{(k, v) => (
<>
<Switch>
<Match when={k === ColorScheme.Auto}>
<WiMoonAltFirstQuarter />
</Match>
<Match when={k === ColorScheme.Light}>
<WiMoonAltNew />
</Match>
<Match when={k === ColorScheme.Dark}>
<WiMoonAltFull />
</Match>
</Switch>
{v}
</>
)}
</Select>
</label>
{/* <label class={css.hue} aria-label="Hue slider">
<input type="range" min="0" max="360" value={theme.hue} onInput={e => setHue(e.target.valueAsNumber)} />
</label> */}
</>
);
};

1
src/global.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="@solidjs/start/env" />

41
src/routes/(shell).tsx Normal file
View file

@ -0,0 +1,41 @@
import { Meta } from "@solidjs/meta";
import { query, createAsync } from "@solidjs/router";
import { createEffect, on, ParentProps } from "solid-js";
import { getRequestEvent } from "solid-js/web";
import { auth } from "~/auth.server";
import { Shell } from "~/features/shell";
import { useTheme } from "~/features/theme";
import { User } from "~/features/user";
const load = query(async (): Promise<User | undefined> => {
"use server";
const session = await auth.api.getSession(getRequestEvent()!.request);
if (session === null) {
return undefined;
}
const { username, name, email, image = null } = session.user;
return { username, name, email, image };
}, "session");
export const route = {
async preload() {
return load();
},
};
export default function ShellPage(props: ParentProps) {
const user = createAsync(() => load());
const themeContext = useTheme();
return (
<Shell user={user()}>
<Meta name="color-scheme" content={themeContext.theme.colorScheme} />
{props.children}
</Shell>
);
}

19
src/routes/(shell)/[...404].tsx Normal file
View file

@ -0,0 +1,19 @@
import { Title } from "@solidjs/meta";
import { HttpStatusCode } from "@solidjs/start";
export default function NotFound() {
return (
<main>
<Title>Not Found</Title>
<HttpStatusCode code={404} />
<h1>Page Not Found</h1>
<p>
Visit{" "}
<a href="https://start.solidjs.com" target="_blank">
start.solidjs.com
</a>{" "}
to learn how to build SolidStart apps.
</p>
</main>
);
}

15
src/routes/(shell)/index.tsx Normal file
View file

@ -0,0 +1,15 @@
import { Title } from "@solidjs/meta";
export const route = {
preload: async () => ({}),
};
export default function Home() {
return (
<>
<Title>Home</Title>
<div>HOME PAGE</div>
</>
);
}