компонент DiskStatus

frontend/src/App.svelte

@@ -8,6 +8,7 @@
   import { StartServer } from "../wailsjs/go/main/App.js";
   import TailwindCss from "./TailwindCSS.svelte";
   import servers from "./servers.js";
+  import DiskStatus from "./DiskStatus.svelte";
   // import {BrowserOpenURL} from '../wailsjs/runtime/runtime.js'
 
   // Определение интерфейса для типа Disk
@@ -98,18 +99,7 @@
 
 <TailwindCss />
 
-<div class="container mx-auto pt-4 mb-4">
-  <div class="disk-panel text-neutral-300">
-    {#each disks as disk}
-      <div>
-        {disk.Name}
-        <a role="button" href="#top" on:click={StartFarDisks} class={disk.normal ? "info" : "danger"}>
-          {disk.Free} Gb
-        </a>
-      </div>
-    {/each}
-  </div>
-</div>
+<DiskStatus {disks} />
 
 <div class="container mx-auto pt-4 mb-4">
   <h1 class="text-blue-200 text-2xl">СЕРВЕРА</h1>

frontend/src/DiskStatus.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { StartFarDisks } from "../wailsjs/go/main/App.js";
+  
+  /** @type {Array<import('./App.svelte').Disk>} */
+  export let disks = [];
+</script>
+
+<div class="container mx-auto pt-4 mb-4">
+  <div class="disk-panel text-neutral-300">
+    {#each disks as disk}
+      <div>
+        {disk.Name}
+        <a role="button" href="#top" on:click={StartFarDisks} class={disk.normal ? "info" : "danger"}>
+          {disk.Free} Gb
+        </a>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .disk-panel {
+    display: flex;
+    justify-content: space-around;
+  }
+  .info {
+    color: lightgreen;
+  }
+  .danger {
+    color: red;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+</style>