Update

2026-07-08 01:31:00 +08:00 · 2023-05-26 08:39:21 +08:00
parent 8e3c329fce
commit 0f40bc7c43
10 changed files with 172 additions and 2 deletions
--- a/components/GlobalContext.tsx
+++ b/components/GlobalContext.tsx
@@ -0,0 +1,23 @@
+import { Component, ComponentChild, createContext } from "preact";
+
+export const GlobalCtx = createContext<State | null>(null);
+
+type State = {
+    stylesheets: Set<string>;
+};
+
+type Props = { children: ComponentChild };
+
+export default class GlobalContext extends Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = { stylesheets: new Set() };
+    }
+    render() {
+        return (
+            <GlobalCtx.Provider value={this.state}>
+                {this.props.children}
+            </GlobalCtx.Provider>
+        );
+    }
+}
--- a/components/Menu.tsx
+++ b/components/Menu.tsx
@@ -0,0 +1,36 @@
+import { Head } from "$fresh/runtime.ts";
+import { Component } from "preact";
+import { ContextType } from "preact";
+import TopAppBar from "preact-material-components/TopAppBar";
+import StyleSheet from "./StyleSheet.tsx";
+import { GlobalCtx } from "./GlobalContext.tsx";
+
+export default class Menu extends Component {
+    static contextType = GlobalCtx;
+    declare context: ContextType<typeof GlobalCtx>;
+    render() {
+        return (
+            <div>
+                <Head>
+                    <GlobalCtx.Provider value={this.context}>
+                        <StyleSheet href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+                        <StyleSheet href="preact-material-components/TopAppBar/style.css" />
+                    </GlobalCtx.Provider>
+                </Head>
+                <TopAppBar onNav={() => {}}>
+                    <TopAppBar.Row>
+                        <TopAppBar.Section align-start>
+                            <TopAppBar.Icon navigation>menu</TopAppBar.Icon>
+                            <TopAppBar.Title>
+                                EH Downloader
+                            </TopAppBar.Title>
+                        </TopAppBar.Section>
+                        <TopAppBar.Section align-end>
+                            <TopAppBar.Icon>more_vert</TopAppBar.Icon>
+                        </TopAppBar.Section>
+                    </TopAppBar.Row>
+                </TopAppBar>
+            </div>
+        );
+    }
+}
--- a/components/StyleSheet.tsx
+++ b/components/StyleSheet.tsx
@@ -0,0 +1,21 @@
+import { asset } from "$fresh/runtime.ts";
+import { Component, ContextType, RenderableProps } from "preact";
+import { GlobalCtx } from "./GlobalContext.tsx";
+
+export type StyleSheetType = {
+    href: string;
+};
+
+export default class StyleSheet extends Component<StyleSheetType, unknown> {
+    static contextType = GlobalCtx;
+    declare context: ContextType<typeof GlobalCtx>;
+    render() {
+        const href = this.props.href;
+        if (this.context) {
+            const sheets = this.context.stylesheets;
+            if (sheets.has(href)) return null;
+            sheets.add(href);
+        }
+        return <link rel="stylesheet" href={asset(this.props.href)} />;
+    }
+}