feat: theme switch design

EATSTEAK · Dec 1, 2023 · f4da994 · f4da994
1 parent 738a31e
commit f4da994
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 3 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,6 @@
 import "./header.css";
+import { LightSwitch } from "./LightSwitch";
+import { Switch } from "./Switch";
 
 export const Header = (props: { page: string }) => {
   const selected = (page: string) =>
@@ -23,8 +25,7 @@ export const Header = (props: { page: string }) => {
           </a>
         </nav>
         <aside class="shrink-0 flex justify-end items-center gap-2 order-2 lg:order-3">
-          <input type="checkbox"></input>
-          <span class="align-center">LIGHT</span>
+          <LightSwitch />
         </aside>
       </div>
     </header>

diff --git a/src/components/LightSwitch.tsx b/src/components/LightSwitch.tsx
@@ -0,0 +1,26 @@
+import { createSignal, type Component, Show } from "solid-js";
+import { Switch } from "./Switch";
+
+export const LightSwitch: Component<{}> = () => {
+  const [isDarkTheme, setDarkTheme] = createSignal(false);
+  return (
+    <div class="flex items-center justify-start">
+      <Switch
+        enabled={isDarkTheme()}
+        onChange={(e) => {
+          setDarkTheme(e.target.checked);
+          console.log(e.target.checked);
+        }}
+      >
+        <Show when={isDarkTheme()} fallback="L">
+          D
+        </Show>
+      </Switch>
+      <span class="align-center font-mono w-16">
+        <Show when={isDarkTheme()} fallback="LIGHT">
+          DARK
+        </Show>
+      </span>
+    </div>
+  );
+};
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
@@ -0,0 +1,50 @@
+import type { JSX, Component } from "solid-js";
+import { createSignal, splitProps } from "solid-js";
+import "./switch.css";
+
+interface SwitchProps {
+  enabled: boolean;
+  ref?: HTMLInputElement;
+  onChange?: JSX.ChangeEventHandler<HTMLInputElement, Event>;
+  children?: JSX.Element;
+}
+
+export const Switch: Component<
+  SwitchProps & JSX.InputHTMLAttributes<HTMLInputElement>
+> = (props) => {
+  const [isEnabled, setIsEnabled] = createSignal(props.enabled);
+
+  const [self, inputAttributes] = splitProps(props, [
+    "enabled",
+    "ref",
+    "onChange",
+    "children",
+  ]);
+
+  const toggle = () => {
+    setIsEnabled((c) => !c);
+    const event = new Event("change");
+    props.ref?.dispatchEvent(event);
+  };
+
+  const handleClick = () => {
+    toggle();
+  };
+  return (
+    <>
+      <div onClick={handleClick} class="switch-background">
+        <div class={`switch-display${isEnabled() ? " enabled" : ""}`}>
+          {self.children}
+        </div>
+        <input
+          ref={props.ref}
+          type="checkbox"
+          class="invisible"
+          checked={isEnabled()}
+          onChange={(e) => self?.onChange?.(e)}
+          {...inputAttributes}
+        ></input>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/switch.css b/src/components/switch.css
@@ -0,0 +1,38 @@
+.switch-background {
+  margin: 0rem 1.5rem;
+  width: 2.5rem;
+  height: 1rem;
+  border-color: black;
+  border-style: solid;
+  border-width: 2px;
+  cursor: pointer;
+  transition: border-color 0.5s ease-out;
+}
+
+.switch-display {
+  font-size: 1.25rem;
+  text-align: center;
+  line-height: 2rem;
+  display: block;
+  width: 2rem;
+  height: 2rem;
+  background-color: white;
+  border-color: black;
+  border-style: solid;
+  border-width: 2px;
+  transition:
+    border-color 0.5s ease-out,
+    background-color 0.5s ease-out,
+    content 0.5s ease-out,
+    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.switch-display:not(.enabled) {
+  content: "☀";
+  transform: translate(-1rem, -0.65rem) rotate(-135deg);
+}
+
+.switch-display.enabled {
+  content: "🌙";
+  transform: translate(1.25rem, -0.65rem) rotate(0deg);
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -14,7 +14,7 @@ const page = pathname.slice(1);
     <BaseHead title={title} description={description} image={image} />
   </head>
   <body class="flex flex-col">
-    <Header page={page} />
+    <Header page={page} client:load />
     <slot />
     <script is:inline>
       const theme = (() => {