Add hover effect in recruiter dashboard

src/app/recruiterDashboard/page.js

 'use client'
 
+import './recruiterDashboard.css'
 import "bootstrap/dist/css/bootstrap.min.css"
 import { Nav, Button, ListGroup, Container, Navbar, Card, ListGroupItem } from "react-bootstrap";
 import { Component, useEffect, useState } from "react";
@@ -87,29 +88,53 @@ class ListingItem extends Component {
     }
   }
 
-  render() {
-    let status_text;
-    switch (this.state.status) {
+  getStatusClass(status) {
+    switch (status) {
       case "Draft":
-        status_text = <p className="text-muted">{this.state.status}</p>
-        break
+        return "text-muted"
       case "Applications Open":
-        status_text = <p className="text-success">{this.state.status}</p>
-        break
+        return "text-success"
       case "Applications Closed":
-        status_text = <p className="text-error">{this.state.status}</p>
-        break
+        return "text-danger"
       default:
-        status_text = <p>{this.state.status}</p>
+        return ""
+    }
+  }
+
+  getRatioClass(ratio) {
+    if (ratio >= 0.8) {
+      return "text-success"
+    } else if (ratio >= 0.4) {
+      return "text-warning"
+    } else if (ratio > 0){
+      return "text-danger"
+    } else {
+      return ""
     }
+  }
+
+  render() {
+
+    console.log(this.state.places_filled)
+    
+    let status_class = this.getStatusClass(this.state.status)
 
+    let places_filled = 0
+    if (this.state.places_filled) {
+      places_filled = this.state.places_filled.length
+    }
+    let total_places = this.state.total_places
+    let ratio = places_filled / total_places
+    
+    let ratio_class = this.getRatioClass(ratio)
+    
     return (
-      <ListGroupItem>
+      <ListGroupItem className="listing">
         <Container className="d-flex justify-content-between" style={{cursor: "pointer"}} onClick={handleClick}>
-          {status_text}
+          <p className={status_class}>{this.state.status}</p>
           <p className="text-center">{this.state.title}</p>
-          <p className="text-warning">
-            {this.state.places_filled}/{this.state.total_places} Applications
+          <p className={ratio_class}>
+            {places_filled}/{total_places} Applications
           </p>
         </Container>
       </ListGroupItem>

src/app/recruiterDashboard/recruiterDashboard.css

@@ -4,4 +4,13 @@ recruiterDashboard {
 
 clickable {
   cursor: pointer;
+}
+
+.listing{
+  border: 1px solid lightgrey !important;
+}
+
+.listing:hover{
+  background-color: lightgrey;
+  border: 1px solid grey;
 }
\ No newline at end of file