refactor initial company list

Wonky.Client/Components/CompanyTable.razor

@@ -19,20 +19,25 @@
 @using Wonky.Client.Helpers;
 @if (Companies.Any())
 {
-    <table class="table">
-        <tbody>
+    <div class="container">
+        <ul class="list-group">
+        
         @foreach (var company in Companies)
         {
-            <tr>
-                <td style="width:50px;"><DisplayStateComponent StateClass="@(company.HasFolded == 1 ? "the-dead" : Utils.GetVisitState(company.NextVisit))"></DisplayStateComponent></td>
-                <td>@company.Name</td>
-                <td>@company.Account</td>
-                <td>@company.City</td>
-                <td><a class="btn btn-primary mb-1" href="/company/@company.CompanyId">Vis</a></td>
-            </tr>
+            <li class="d-flex justify-content-between align-items-start list-group-item list-group-item-action" style="cursor:pointer" @onclick="() => NavigateCompany(company.CompanyId)">
+                <div class="me-auto">
+                    <div class="fw-bold mb-1">
+                        <DisplayStateComponent StateClass="@(company.HasFolded == 1 ? "the-dead" : Utils.GetVisitState(company.NextVisit))"></DisplayStateComponent>@company.Name    
+                    </div>
+                    <div>
+                        <span class="fw-bold me-1">Konto:</span>@company.Account<span class="fw-bold mx-1">Bynavn:</span>@company.City
+                    </div>
+                </div>
+                <span class="badge bg-primary">Vis</span>
+            </li>
         }
-        </tbody>
-    </table>
+        </ul>
+    </div>
 }
 else
 {

Wonky.Client/Components/CompanyTable.razor.cs

@@ -14,7 +14,6 @@
 //    along with this program.  If not, see [https://www.gnu.org/licenses/agpl-3.0.en.html]
 //
 
-
 using Microsoft.AspNetCore.Components;
 using Wonky.Client.Shared;
 using Wonky.Entity.DTO;
@@ -26,6 +25,7 @@ namespace Wonky.Client.Components
         [Parameter] public List<CompanyDto> Companies { get; set; } = new(); 
         [Parameter] public EventCallback<string> OnDelete { get; set; }
         [Parameter] public EventCallback<string> OnSelect { get; set; }
+        [Inject] public NavigationManager NavManager { get; set; }
         
         private Confirmation _confirmation = new ();
         private string _companyId = string.Empty;
@@ -41,5 +41,10 @@ namespace Wonky.Client.Components
             _confirmation.Hide();
             await OnDelete.InvokeAsync(_companyId);
         }
+
+        private void NavigateCompany(string companyId)
+        {
+            NavManager.NavigateTo($"/company/{companyId}");
+        }
     }    
 }

Wonky.Client/Components/DisplayStateComponent.razor

@@ -15,7 +15,7 @@
 //
 *@
 
-<img class="img-fluid float-start rounded-circle state @StateClass mx-3" src="state.png" alt="state"/>
+<img class="img-fluid float-start rounded-circle state @StateClass me-1" src="state.png" alt="state"/>
 @code{
     [Parameter] public string StateClass { get; set; } = "the-dead";
 }