Initial commitHEADmaster

Simple frontend version with mock API

1 files changed, 57 insertions, 0 deletions

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..031fc73
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,57 @@
+import styles from "./Button.module.css";
+import { createEffect, createSignal } from "solid-js";
+
+enum BtnType {
+  click = 0,
+  switch = 1,
+}
+export type Button =
+  | {
+      type: BtnType.click;
+      name: string;
+      color?: string;
+    }
+  | {
+      type: BtnType.switch;
+      name: string;
+    };
+
+export default function Button(props: Button) {
+  const [value, setValue] = createSignal(false);
+  const [bgColor, setBgColor] = createSignal<string>();
+
+  createEffect(() => {
+    if (props.type === BtnType.click) {
+      setBgColor(value() ? "pink" : "blue");
+    } else {
+      setBgColor(value() ? "green" : "red");
+    }
+  });
+
+  function onClick() {
+    if (props.type === BtnType.click) {
+      if (value() === true) {
+        return;
+      }
+      setValue(true);
+      setTimeout(() => {
+        setValue(false);
+      }, 3000);
+    } else {
+      setValue((old) => !old);
+    }
+  }
+
+  return (
+    <button
+      on:click={onClick}
+      class={styles.btn}
+      style={{ "background-color": bgColor() }}
+    >
+      {
+        //btnText()
+      }
+      {props.name}
+    </button>
+  );
+}