Themes & Homepages

// package.json (excerpt)
{
  "name": "my-theme",
  "kwirth": {
    "type": "theme",
    "id":   "my-theme",
    "displayName": "My Theme"
  }
}

// src/index.tsx
import { createTheme, ThemeProvider } from '@mui/material'
import { IThemeProps } from '@kwirthmagnify/kwirth-common-front'

const theme = createTheme({
  palette: {
    mode: 'dark',
    primary: { main: '#your-accent-color' },
  }
})

export default function MyTheme({ children }: IThemeProps) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
}

// src/index.tsx
import { FC, useEffect, useState } from 'react'
import {
  IHomepageProps, IClusterEvent
} from '@kwirthmagnify/kwirth-common-front'

const MyHomepage: FC<IHomepageProps> = (props) => {
  const [metrics, setMetrics] = useState<any>({})

  useEffect(() => {
    props.clusters.forEach(async (c) => {
      const m = await props.getClusterMetrics?.(c.name)
      if (m) setMetrics(prev => ({...prev, [c.name]: m}))
    })
  }, [props.clusters])

  return (
    <div>
      {props.clusters.map(c => (
        <div key={c.name}>
          <h2>{c.name}</h2>
          <p>CPU: {metrics[c.name]?.cpu ?? '--'}%</p>
        </div>
      ))}
    </div>
  )
}
export default MyHomepage