# common


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

------------------------------------------------------------------------

<a
href="https://github.com/cj-mills/cjm-fasthtml-sysmon/blob/main/cjm_fasthtml_sysmon/components/common.py#L26"
target="_blank" style="float:right; font-size:smaller">source</a>

### render_stat_card

>  render_stat_card (title_text:str, value_text:str, desc_text:str=None,
>                        value_color:str=None)

*Render a stat card with consistent styling.*

<table>
<colgroup>
<col style="width: 6%" />
<col style="width: 25%" />
<col style="width: 34%" />
<col style="width: 34%" />
</colgroup>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Default</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>title_text</td>
<td>str</td>
<td></td>
<td>The title text for the stat card</td>
</tr>
<tr>
<td>value_text</td>
<td>str</td>
<td></td>
<td>The main value to display in the stat card</td>
</tr>
<tr>
<td>desc_text</td>
<td>str</td>
<td>None</td>
<td>Optional description text below the value</td>
</tr>
<tr>
<td>value_color</td>
<td>str</td>
<td>None</td>
<td>Optional color class for the value text</td>
</tr>
<tr>
<td><strong>Returns</strong></td>
<td><strong>FT</strong></td>
<td></td>
<td><strong>A Div element containing the stat card with consistent
styling</strong></td>
</tr>
</tbody>
</table>

``` python
from cjm_fasthtml_sysmon.monitors.system import get_static_system_info
info = get_static_system_info()
render_stat_card("System", f"{info['os']} {info['os_release']}", info['architecture'])
```

``` html
<div class="stat">
  <div class="stat-title text-xs text-base-content/60">System</div>
  <div class="stat-value text-2xl font-bold text-base-content">Linux 6.11.0-1018-azure</div>
  <div class="stat-desc text-xs text-base-content/50">x86_64</div>
</div>
```

------------------------------------------------------------------------

<a
href="https://github.com/cj-mills/cjm-fasthtml-sysmon/blob/main/cjm_fasthtml_sysmon/components/common.py#L57"
target="_blank" style="float:right; font-size:smaller">source</a>

### render_progress_bar

>  render_progress_bar (value:float, max_value:float=100, label:str=None)

*Render a progress bar with label.*

<table>
<colgroup>
<col style="width: 6%" />
<col style="width: 25%" />
<col style="width: 34%" />
<col style="width: 34%" />
</colgroup>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Default</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>float</td>
<td></td>
<td>The current progress value</td>
</tr>
<tr>
<td>max_value</td>
<td>float</td>
<td>100</td>
<td>The maximum value for the progress bar (default: 100)</td>
</tr>
<tr>
<td>label</td>
<td>str</td>
<td>None</td>
<td>Optional label text to display above the progress bar</td>
</tr>
<tr>
<td><strong>Returns</strong></td>
<td><strong>FT</strong></td>
<td></td>
<td><strong>A Div element containing the progress bar with optional
label</strong></td>
</tr>
</tbody>
</table>

``` python
render_progress_bar(10, 100, "Label")
```

``` html
<div>
  <div class="justify-between mb-2 flex">
<span class="text-sm font-medium text-base-content">Label</span><span class="text-xs text-base-content/70">10.0%</span>  </div>
<progress value="10" max="100" class="progress progress-success w-full h-2"></progress></div>
```