src/components/Button.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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>
  );
}