add header & switcher

Liberluna · Nov 18, 2023 · 6f3f36e · 6f3f36e
1 parent fb743d6
commit 6f3f36e
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 1 deletion.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import react from "@astrojs/react";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [react()]
+});
diff --git a/src/astro.config.mjs b/src/astro.config.mjs
@@ -1,8 +1,9 @@
 import { defineConfig } from 'astro/config';
 import tailwind from "@astrojs/tailwind";
 import sitemap from "@astrojs/sitemap";
+import react from "@astrojs/react";
 
 export default defineConfig({
-  integrations: [tailwind(), sitemap()],
+  integrations: [tailwind(), sitemap(), react()],
   site: "https://jspce.ame-x.net", // 暫定
 });
diff --git a/src/src/layout/Footer/Footer.astro b/src/src/layout/Footer/Footer.astro
@@ -0,0 +1,5 @@
+---
+---
+<footer>
+    footer
+</footer>
diff --git a/src/src/layout/Header/Header.astro b/src/src/layout/Header/Header.astro
@@ -0,0 +1,8 @@
+---
+import { Switcher } from "./SwitchLiteDark.tsx";
+
+---
+<header>
+    header
+    <Switcher client:load />
+</header>
diff --git a/src/src/layout/Header/SwitchLiteDark.tsx b/src/src/layout/Header/SwitchLiteDark.tsx
@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+function SwitchButton(props) {
+    return (
+        <></>
+    )
+}
+
+export function Switcher() {
+
+    if (typeof localStorage === 'undefined' || localStorage === undefined) {
+        return <button>Switch!</button>
+    }
+
+    const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+        console.log(theme);
+
+    const handleSwitch = () => {
+        const newTheme = theme === 'light' ? 'dark' : 'light';
+        setTheme(newTheme);
+        localStorage.setItem('theme', newTheme);
+    };
+
+    return (
+        <button onClick={handleSwitch}>Switch!</button>
+    );
+}
diff --git a/src/src/layout/Layout.astro b/src/src/layout/Layout.astro
@@ -1,6 +1,9 @@
 ---
 import BaseHead from './BaseHead.astro';
 
+import Header from './Header/Header.astro';
+import Footer from './Footer/Footer.astro';
+
 interface Props {
     title?: string;
     description?: string;
@@ -13,8 +16,10 @@ const { title, description, image } = Astro.props as Props;
 <html lang="ja">
     <BaseHead title={title ?? "JSPCE - JavaScript Professional Certification Examination"} description={description ?? "JavaScript Professional Certification Examination Offical Site"} image={image ?? "/favicon.png"} />
     <body>
+        <Header />
         <div id="__nuxt" style={{ display: "contents" }}>
             <slot />
         </div>
+        <Footer />
     </body>
 </html>
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}