99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
›
⌄
import { html, atom, renderApp } from "mates";
import { Text, OutlinedButton, TextButton, FilledButton } from "mates-ui";
const App = () => {
const count = atom(0);
return () => html`
<div class="counter">
${Text("Counter", { type: "headline-lg", color: "muted" })}
${Text(count(), { type: "stat", color: "muted" })}
<div class="counter__actions">
${OutlinedButton("−", { onClick: () => count.set((n) => n - 1) })}
${TextButton("Reset", { onClick: () => count.set(0) })}
${FilledButton("+", { onClick: () => count.set((n) => n + 1) })}
</div>
</div>
`;
};
renderApp(App, document.getElementById("app"));
99
1
2
3
4
5
6
7
8
9
10
11
12
13
›
⌄
⌄
.counter {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 3rem 1rem;
}
.counter__actions {
display: flex;
gap: 0.5rem;
}
Console
0 logs
No output yet — run your code to see logs here.