Add 'Add New Proxmox Cluster' button (without actions yet)

netdevopsbr · Nov 14, 2023 · 70bf70e · 70bf70e
1 parent 1e1d017
commit 70bf70e
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 15 deletions.
diff --git a/standalone/app/page.tsx b/standalone/app/page.tsx
@@ -26,7 +26,7 @@ export default async function Home() {
 
 
   return (
-    <div className="p-5">
+    <div className="p-10">
       <SessionList />
     </div>
   )

diff --git a/standalone/components/SessionItem/SessionItemRoot.tsx b/standalone/components/SessionItem/SessionItemRoot.tsx
@@ -8,14 +8,14 @@ export default function SessionItemRoot({ cluster, children }) {
 
             <div className="flex-auto flex-col py-4">
               {/* Row 1 */}
-              <div class="flex gap-x-4 pl-4 mb-3 items-center">
+              <div class="flex gap-x-4 pl-4 mb-3 items-center font-bold">
 
                   {/* Status Placeholder */}
                   { children }
 
                   <div className="">{cluster.name}</div>
                   <div>/</div>
-                  <div className="">{cluster.domain}:{cluster.http_port}</div>
+                  <div className="">{cluster.domain} : {cluster.http_port}</div>
               </div>
               {/* Row 2 */}
               <div className="flex gap-x-4 pl-4">
@@ -24,7 +24,7 @@ export default function SessionItemRoot({ cluster, children }) {
 
             </div>
             {/* Cluster Mode Badge */}
-            <div className= "flex-none mx-2 my-5 rounded-3xl p-3 mr-3 order-last bg-amber-400 text-white text-lg "><span>{cluster.mode}</span></div>
+            <div className= "flex-none mx-2 my-5 rounded-3xl self-center p-2 mr-3 order-last bg-amber-400 text-white text-lg "><span>{cluster.mode}</span></div>
 
         </div>
         </Link >

diff --git a/...omponents/SessionItem/SessionItemIcon.tsx → ...nts/SessionItem/SessionItemStatusIcon.tsx b/...omponents/SessionItem/SessionItemIcon.tsx → ...nts/SessionItem/SessionItemStatusIcon.tsx
@@ -2,11 +2,11 @@ import clsx from 'clsx';
 
 type SessionStatus = "running" | "stopped" | "error" | "unknown"
 
-interface SessionItemIconProps {
+interface SessionItemStatusIconProps {
     status: SessionStatus
 }
 
-export default function SessionItemIcon({ status }: SessionItemIconProps) {
+export default function SessionItemStatusIcon({ status }: SessionItemStatusIconProps) {
     return (
         <div>
             <span className="relative flex h-3 w-3">

diff --git a/standalone/components/SessionItem/index.tsx b/standalone/components/SessionItem/index.tsx
@@ -1,7 +1,7 @@
 import SessionItemRoot from "./SessionItemRoot";
-import SessionItemIcon from "./SessionItemIcon";
+import SessionItemStatusIcon from "./SessionItemStatusIcon";
 
 export const SessionItem = {
     Root: SessionItemRoot,
-    Icon: SessionItemIcon,
+    StatusIcon: SessionItemStatusIcon,
 }
diff --git a/standalone/components/SessionList.tsx b/standalone/components/SessionList.tsx
@@ -1,6 +1,5 @@
 
 import Image from 'next/image';
-import Link from 'next/link';
 
 import { SessionItem } from '@/components/SessionItem';
 
@@ -30,16 +29,17 @@ export async function SessionList ({ children, target }: SessionListProps) {
             <div className="divide-y">
                 {
                     response_json.map(( item ) => (
-                            <>
-                                {/* <Link href={`/proxmox/${item.name}`}> */}
-                                    <SessionItem.Root cluster={item}>
-                                        <SessionItem.Icon status="running" />
-                                    </SessionItem.Root>
-                                {/* </Link> */}
+                            <> 
+                                <SessionItem.Root cluster={item}>
+                                    <SessionItem.StatusIcon status="running" />
+                                </SessionItem.Root>
                             </>
                         )
                     )
                 }
+            <div className="flex justify-end">
+                <button className="border border-green-400 hover:bg-green-500 duration-00 p-2 mt-3 rounded-lg hover:bg-green-600 hover:text-white font-medium">Add New Proxmox Cluster</button>
+            </div>
 
             </div>
         </>