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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Custom styles. -->
<link rel="stylesheet" type="text/css" href="./styles.css" />
<!-- Allows React to be run buildless via "text/babel" script below. -->
<script
src="https://unpkg.com/@babel/standalone@7.25.6/babel.min.js"
integrity="sha256-aS0B0wnsaDByLfE16h4MDCP1fQFccysd1YWOcV+gbBo="
crossorigin="anonymous"
></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-type="module">
import React, {
useState,
useEffect,
} from 'https://esm.sh/react@18?dev';
import { createRoot } from 'https://esm.sh/react-dom@18/client?dev';
import * as zebar from 'https://esm.sh/zebar@2';
const providers = zebar.createProviderGroup({
glazewm: { type: 'glazewm' },
cpu: { type: 'cpu' },
memory: { type: 'memory' },
date: { type: 'date', formatting: 'yyyy-LL-dd HH:mm:ss' },
});
createRoot(document.getElementById('root')).render(<App />);
function App() {
const [output, setOutput] = useState(providers.outputMap);
useEffect(() => {
providers.onOutput(() => setOutput(providers.outputMap));
}, []);
return (
<div className="app">
<div className="left">
{output.glazewm && (
<div className="workspaces">
{output.glazewm.currentWorkspaces.map(workspace => (
<button
className={`workspace ${workspace.hasFocus && 'focused'} ${workspace.isDisplayed && 'displayed'}`}
onClick={() =>
output.glazewm.runCommand(
`focus --workspace ${workspace.name}`,
)
}
key={workspace.name}
>
{workspace.displayName ?? workspace.name}
</button>
))}
</div>
)}
</div>
<div className="center">
{output.date && (
<div className="date">
{output.date.formatted}
</div>
)}
</div>
<div className="right">
{output.memory && (
<div className="memory">
<i className="nf nf-fae-chip"></i>
{Math.round(output.memory.usage)}%
</div>
)}
{output.cpu && (
<div className="cpu">
<i className="nf nf-oct-cpu"></i>
{/* Change the text color if the CPU usage is high. */}
<span
className={output.cpu.usage > 85 ? 'high-usage' : ''}
>
{Math.round(output.cpu.usage)}%
</span>
</div>
)}
</div>
</div>
);
}
</script>
</body>
</html>
|
