From 44da28206002e3e985ee3dc801f65f71f6a3eb4a Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Thu, 9 May 2024 15:47:58 -0700
Subject: [PATCH] improve server version

---
 .../src/components/resources/server/index.tsx | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/resources/server/index.tsx b/frontend/src/components/resources/server/index.tsx
index 98fb66e8a..bfa9f4701 100644
--- a/frontend/src/components/resources/server/index.tsx
+++ b/frontend/src/components/resources/server/index.tsx
@@ -11,6 +11,7 @@ import {
   Scissors,
   XOctagon,
   AreaChart,
+  Milestone,
 } from "lucide-react";
 import { Section } from "@components/layouts";
 import { RenameServer } from "./actions";
@@ -70,19 +71,27 @@ export const ServerComponents: RequiredResourceComponents = {
         </Card>
       );
     },
-    Stats: ({id}) => <Link to={`/servers/${id}/stats`}>
-      <Button variant="link" className="flex gap-2 items-center p-0">
-        <AreaChart className="w-4 h-4" />
-        Stats
-      </Button>
-    </Link>
+    Stats: ({ id }) => (
+      <Link to={`/servers/${id}/stats`}>
+        <Button variant="link" className="flex gap-2 items-center p-0">
+          <AreaChart className="w-4 h-4" />
+          Stats
+        </Button>
+      </Link>
+    ),
+    Version: ({ id }) => {
+      const version = useRead("GetPeripheryVersion", { server: id }).data
+        ?.version;
+      return (
+        <div className="flex items-center gap-2">
+          <Milestone className="w-4 h-4" />
+          {version}
+        </div>
+      );
+    },
   },
 
   Info: {
-    Version: ({id}) => {
-      const version = useRead("GetPeripheryVersion", { server: id }).data?.version
-      return <>{version}</>
-    },
     Cpu: ({ id }) => {
       const server = useServer(id);
       const core_count =