solid-socket/src/components/invites.tsx at next · devagrawal09/solid-socket · GitHub

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { A } from "@solidjs/router";
import { For, Show } from "solid-js";
import { useInvites } from "~/lib/todos";

export function Invites() {
  const serverInvites = useInvites();

  return (
    <div
      style={{
        "text-align": "center",
        "margin-top": "100px",
        "font-size": "20px",
      }}
    >
      <p>Invite someone to your list!</p>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          serverInvites.addInvite(
            new FormData(e.currentTarget).get("invite") as string
          );
          e.currentTarget.reset();
        }}
      >
        <input
          placeholder="Username"
          name="invite"
          style={{
            "background-color": "#f2f2f2",
            border: "1px solid grey",
            "border-radius": "5px",
            color: "black",
            padding: "15px 32px",
            "text-align": "center",
            "text-decoration": "none",
            display: "inline-block",
            "font-size": "16px",
            margin: "4px 2px",
          }}
        />
      </form>
      <Show when={serverInvites.inviteds()?.length}>
        <h4>Invited</h4>
        <For each={serverInvites.inviteds() || []}>
          {(invite) => (
            <div>
              {invite}
              <button
                onClick={() => serverInvites.removeInvite(invite)}
                style={{
                  "background-color": "red",
                  border: "none",
                  "border-radius": "50%",
                  color: "white",
                  padding: "12px 15px",
                  "text-align": "center",
                  "text-decoration": "none",
                  display: "inline-block",
                  "font-size": "16px",
                  margin: "4px",
                  cursor: "pointer",
                }}
              >
                X
              </button>
            </div>
          )}
        </For>
      </Show>
      <Show when={serverInvites.invites()?.length}>
        <h4>Invites</h4>
        <For each={serverInvites.invites() || []}>
          {(invite) => (
            <div>
              <A href={`/${invite}`}>{invite}</A>
            </div>
          )}
        </For>
      </Show>
    </div>
  );
}