mirror of
https://github.com/cf-sonr/motr.git
synced 2026-01-12 02:59:13 +00:00
84 lines
3.2 KiB
Plaintext
84 lines
3.2 KiB
Plaintext
package dash
|
|
|
|
// StatusCard component for displaying Helia node status
|
|
templ StatusCard() {
|
|
<div class="p-4 flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<h2 class="text-4xl font-semibold text-gray-800 dark:text-neutral-200">
|
|
<span id="statusValue">Offline</span>
|
|
</h2>
|
|
<div class="flex items-center -space-x-2">
|
|
<img class="shrink-0 size-7 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar"/>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-gray-500 dark:text-neutral-500">
|
|
Status
|
|
</h3>
|
|
</div>
|
|
}
|
|
|
|
// NodeIDCard component for displaying Helia node ID
|
|
templ NodeIDCard() {
|
|
<div>
|
|
<div class="p-4 flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<h2 class="text-4xl font-semibold text-gray-800 dark:text-neutral-200">
|
|
Node ID
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="inline-flex items-center gap-x-2">
|
|
<h3 class="text-gray-500 dark:text-neutral-500">
|
|
<span id="nodeId">-</span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
// DiscoveredPeersCard component for displaying discovered peers count
|
|
templ DiscoveredPeersCard() {
|
|
<div class="p-4 flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<h2 class="text-4xl font-semibold text-gray-800 dark:text-neutral-200">
|
|
<span id="discoveredPeerCount">0</span>
|
|
</h2>
|
|
</div>
|
|
<div class="inline-flex items-center gap-x-2">
|
|
<h3 class="text-gray-500 dark:text-neutral-500">
|
|
Discovered Peers
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
// ConnectedPeersCard component for displaying connected peers count
|
|
templ ConnectedPeersCard() {
|
|
<div class="p-4 flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<h2 class="text-4xl font-semibold text-gray-800 dark:text-neutral-200">
|
|
<span id="connectedPeerCount">0</span>
|
|
</h2>
|
|
<div class="flex items-center -space-x-2"></div>
|
|
</div>
|
|
<h3 class="text-gray-500 dark:text-neutral-500">
|
|
Connected Peers
|
|
</h3>
|
|
</div>
|
|
}
|
|
|
|
// Optional: Create a component for a connected peers list if needed
|
|
templ ConnectedPeersList() {
|
|
<div class="p-4 bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
|
|
<h3 class="text-lg font-medium text-gray-800 dark:text-neutral-200 mb-2">Connected Peers List</h3>
|
|
<ul id="connectedPeersList" class="text-sm text-gray-600 dark:text-neutral-400"></ul>
|
|
</div>
|
|
}
|
|
|
|
// Optional: Create a component for the running log
|
|
templ RunningLog() {
|
|
<div class="p-4 bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
|
|
<h3 class="text-lg font-medium text-gray-800 dark:text-neutral-200 mb-2">Running Log</h3>
|
|
<div id="runningLog" class="text-sm text-gray-600 dark:text-neutral-400 h-40 overflow-y-auto font-mono"></div>
|
|
</div>
|
|
}
|