updated styling when network is selected

src/pages/index.tsx

@@ -5,12 +5,12 @@ import styles from '../styles/Home.module.css'
 import { getData, getSummary, getNetworks } from '../utils/getData'
 
 export default function HomePage(): ReactElement {
-  const [network, setNetwork] = useState<number>(3)
+  const [network, setNetwork] = useState<number>(1)
   const [networks, setNetworks] = useState<string[]>()
   const [statuses, setStatuses] = useState<Status[]>()
   const [summary, setSummary] = useState<Summary[]>()
 
-  function style(state: State) {
+  function statusStyle(state: State) {
     console.log('state', state)
     if (state === State.Down) {
       return styles.down
@@ -21,6 +21,12 @@ export default function HomePage(): ReactElement {
     }
   }
 
+  function networkStyle(networkIndex: number) {
+    if (networkIndex === network) {
+      return styles.networkSelected
+    } else return
+  }
+
   useEffect(() => {
     async function getStatuses() {
       const statusData = await getData()
@@ -55,8 +61,11 @@ export default function HomePage(): ReactElement {
         <div className={styles.grid}>
           {networks && (
             <>
-              {networks.map((value: string) => (
+              {networks.map((value: string, index: number) => (
-                <div key={value} className={`${styles.network}`}>
+                <div
+                  key={value}
+                  className={`${styles.network} ${networkStyle(index)}`}
+                >
                   {value}
                 </div>
               ))}
@@ -69,7 +78,7 @@ export default function HomePage(): ReactElement {
               {summary.map((value: Summary) => (
                 <div
                   key={value.component}
-                  className={`${styles.card} ${style(value.status)}`}
+                  className={`${styles.card} ${statusStyle(value.status)}`}
                 >
                   <h2>{value?.component}</h2>
                   <p>{value?.status}</p>

src/styles/Home.module.css

@@ -105,6 +105,11 @@
   font-weight: 600;
   transition: 0.2s ease-out;
 }
+.networkSelected {
+  color: #fcfcfc;
+  background: #41474e;
+  border-color: #fcfcfc;
+}
 .up {
   border: 2px solid #5fb359;
 }

src/utils/getData.ts

@@ -11,6 +11,7 @@ export async function getData(): Promise<Status[]> {
 
     const data = [...response.data]
     console.log('1. data length', data.length)
+    console.log('1. data ', data)
 
     return data
   } catch (error) {