change skillList to Accordion and add Evidence

src/app/recruiterDashboard/page.js

@@ -4,7 +4,7 @@ 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";
-import StudentNavbar from "../studentNavbar";
+import RecruiterNavbar from '../recruiterNavbar';
 
 function RecruiterDashboard() {
 
@@ -19,7 +19,7 @@ function RecruiterDashboard() {
 
   return (
     <main className="recruiterDashboard">
-      <StudentNavbar/>
+      <RecruiterNavbar></RecruiterNavbar>
       
       {/* Job Listings List */}
       <Container  style={{height: "80vh"}}>

src/app/recruiterInternship/page.js

 'use client'
 import "bootstrap/dist/css/bootstrap.min.css"
 import starStyle from './Star.module.css';
-import { Button, Card, Col, Container, ListGroup, ListGroupItem, Nav, Row } from "react-bootstrap";
+import { Accordion, Button, Card, Col, Container, ListGroup, ListGroupItem, Nav, Row } from "react-bootstrap";
 import { Component, useEffect, useState } from "react";
+import RecruiterNavbar from "../recruiterNavbar";
 
 function RecruiterInternship() {
   const [post, setPost] = useState({name: "", applications: []});
@@ -15,12 +16,12 @@ function RecruiterInternship() {
 
   return (
     <main className="recruiterInternship">
-      <Button href="./recruiterDashboard">Return to Dashboard</Button>
+      <RecruiterNavbar></RecruiterNavbar>
       <Card>
         <Card.Header>{post.name}</Card.Header>
         <Card.Body>
           <Row>
-            <Col>
+            <Col xs={4}>
               <ApplicantList post={post}/>
             </Col>
             <Col>
@@ -88,16 +89,15 @@ class SkillList extends Component {
             <Button>Accept</Button>
           </Card.Header>
           
-          <ListGroup>{
+          <Accordion>{
             this.skills.map((skill) => (
-              <ListGroupItem key={skill.name}>
-                <Container className="d-flex justify-content-between" style={{cursor: "pointer"}}>
-                <p className="text-center">{skill.name}</p>
-                <StarRating />
-                </Container>
-              </ListGroupItem>
+              <Accordion.Item eventKey={skill.name}>
+                <Accordion.Header>{skill.name}</Accordion.Header>
+                <Accordion.Body><Container className="d-flex justify-content-between" style={{cursor: "pointer"}}>
+                  <p className="text-center">Evidenceasdfasdfasdfads asdfasdfsdfasdf asdfasdfasd fasd sdafasdfasdf asdf asdf asdfasdf asdf asdfasdfasdf asdfasdf asdfasdf asdf adasdf</p><StarRating /></Container></Accordion.Body>
+              </Accordion.Item>
             ))}
-          </ListGroup>
+          </Accordion>
         </Card>
       </Container>
     )

src/app/recruiterInternship/recruiterInternship.css

 recruiterInternship {
   margin: 5px;
+}
+
+p {
+  word-break: break-all;
+  white-space: normal;
 }
\ No newline at end of file

src/app/recruiterNavbar.js

+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import NavDropdown from 'react-bootstrap/NavDropdown';
+import Container from 'react-bootstrap/Container';
+
+function RecruiterNavbar() { 
+    return (
+        <Navbar bg="light" expand="lg">
+      <Container>
+        <Navbar.Brand href="/"><img
+              alt=""
+              src="/favicon.ico"
+              width="30"
+              height="30"
+              className="d-inline-block align-top"
+            />{' '}InternHunt</Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="me-auto">
+            <Nav.Link href="./recruiterDashboard">Dashboard</Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+    )
+}
+
+export default RecruiterNavbar;
\ No newline at end of file