This repository has been archived on 2023-12-17. You can view files and clone it, but cannot push or open issues or pull requests.
extension/ui/apps/dashboard/components/Header.svelte

47 lines
1.4 KiB
Svelte
Raw Normal View History

<script>
import lumeLogo from "../../../assets/lume-logo.png";
import { waitForConnected } from "../../../../shared/util.ts";
let userCount;
let connected = false;
waitForConnected(() => {
connected = true;
});
</script>
<header>
<img src={lumeLogo} alt="Lume" />
<div class="status">
<div class="network" class:connected>
<div class="connected" class:connected class:connecting={!connected}>
<span
class="icon"
class:icon-success={connected}
class:icon-wait={!connected}
class:icon-wait-yellow={!connected} />
Lume Network
</div>
</div>
<div class="user-count" class:user-count-hidden={!userCount}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
{userCount}
</div>
</div>
</header>
<style lang="scss">
@import "Header.scss";
</style>