feat:

--Added Button in cluster

src/App.tsx

@@ -14,6 +14,7 @@ type Theme = 'light' | 'dark'
 type TokenStatus = 'idle' | 'loading' | 'success' | 'error'
 type RegisterStatus = 'idle' | 'loading' | 'success' | 'error'
 type NodesStatus = 'idle' | 'loading' | 'success' | 'error'
+type ClusterStatus = 'idle' | 'loading' | 'success' | 'error'
 
 type RegisterNodePayload = {
   node_name: string
@@ -188,6 +189,14 @@ const deleteNodeInterface = async (
   return response.json() as Promise<DeleteNodeInterfaceResponse>
 }
 
+const createCluster = async () => {
+  await new Promise((resolve) => {
+    window.setTimeout(resolve, 500)
+  })
+
+  return { status: 'success' }
+}
+
 function App() {
   const [isCollapsed, setIsCollapsed] = useState(false)
   const [activePage, setActivePage] = useState<PageId>(getSavedPage)
@@ -201,6 +210,8 @@ function App() {
   const [nodesStatus, setNodesStatus] = useState<NodesStatus>('idle')
   const [nodesError, setNodesError] = useState('')
   const [deletingNodeId, setDeletingNodeId] = useState<number | null>(null)
+  const [clusterStatus, setClusterStatus] = useState<ClusterStatus>('idle')
+  const [clusterError, setClusterError] = useState('')
   const nextTheme = theme === 'light' ? 'dark' : 'light'
 
   const loadNodeInterfaces = async () => {
@@ -327,6 +338,26 @@ function App() {
     }
   }
 
+  const handleCreateClusterClick = async () => {
+    setClusterStatus('loading')
+    setClusterError('')
+
+    try {
+      const clusterResponse = await createCluster()
+
+      if (clusterResponse.status !== 'success') {
+        throw new Error('Failed to create cluster')
+      }
+
+      setClusterStatus('success')
+    } catch (error) {
+      setClusterStatus('error')
+      setClusterError(
+        error instanceof Error ? error.message : 'Failed to create cluster',
+      )
+    }
+  }
+
   return (
     <div
       className={`app-shell theme-${theme} ${isCollapsed ? 'nav-collapsed' : ''}`}
@@ -551,7 +582,27 @@ function App() {
 
         {activePage === 'clusters' && (
           <section className="content-panel" id="clusters">
-            <h1>Clusters</h1>
+            <div className="page-header">
+              <h1>Clusters</h1>
+              <button
+                type="button"
+                className="primary-button"
+                onClick={handleCreateClusterClick}
+                disabled={clusterStatus === 'loading'}
+              >
+                {clusterStatus === 'loading'
+                  ? 'Creating Cluster'
+                  : 'Create Cluster'}
+              </button>
+            </div>
+
+            {clusterStatus === 'success' && (
+              <p className="status-message success">Dummy API triggered.</p>
+            )}
+
+            {clusterStatus === 'error' && (
+              <p className="status-message error">{clusterError}</p>
+            )}
           </section>
         )}
       </main>