E2433. Implement UI for Student Teams

src/App.tsx

@@ -30,6 +30,10 @@ import { loadCourseInstructorDataAndInstitutions } from "pages/Courses/CourseUti
 import TA from "pages/TA/TA";
 import TAEditor from "pages/TA/TAEditor";
 import { loadTAs } from "pages/TA/TAUtil";
+import StudentTeams from "pages/Student Teams/student_teams";
+import StudentTeamView from "pages/Student Teams/student_teams";
+import NewTeammateAdvertisement from 'pages/Student Teams/NewTeammateAdvertisement';
+import TeammateReview from 'pages/Student Teams/TeammateReview';
 
 function App() {
   const router = createBrowserRouter([
@@ -58,6 +62,24 @@ function App() {
             },
           ],
         },
+        {
+          path: "student_teams",
+          element: <ProtectedRoute element={<StudentTeams />} />,
+          children: [
+            {
+              path: "view",
+              element: <StudentTeamView />,
+            },
+          ],
+        },
+        {
+          path: "advertise_for_partner/new",
+          element: <ProtectedRoute element={<NewTeammateAdvertisement />} />,
+        },
+        {
+          path: "response/new",
+          element: <ProtectedRoute element={<TeammateReview />} />,
+        },
         {
           path: "users",
           element: <ProtectedRoute element={<Users />} leastPrivilegeRole={ROLE.TA} />,

src/pages/Student Teams/NewTeammateAdvertisement.tsx

@@ -0,0 +1,74 @@
+import React, { useState, FC } from 'react';
+import { Form, Button, FormControl } from 'react-bootstrap';
+
+const NewTeammateAdvertisement: FC = () => {
+    const [description, setDescription] = useState('');
+
+    // Styles object for CSS-in-JS
+    const styles = {
+        container: {
+            fontFamily: 'Arial, sans-serif',
+            maxWidth: '1000px',
+            margin: '0 auto',
+            padding: '20px',
+            fontSize: '0.85rem',
+        },
+        header: {
+            marginBottom: '20px',
+            fontSize: '2rem', // Larger font size for the header
+        },
+        formLabel: {
+            fontSize: '0.85rem',
+            fontWeight: 'bold',
+            marginBottom: '10px', // Space between label and textarea
+        },
+        formControl: {
+            fontSize: '0.85rem',
+            borderColor: 'black',
+            borderRadius: '3px',
+            marginBottom: '20px', // Space between textarea and button
+        },
+        submitButton: {
+            backgroundColor: 'transparent', 
+            borderColor: '#000', // black border color
+            color: '#000', // text color
+            fontSize: '0.85rem', // match the font size of other elements
+            padding: '2px 5px', // adjust the vertical and horizontal padding as needed
+            borderRadius: '0px', // no border-radius for a square look
+            textDecoration: 'none',
+        }
+    };
+
+    // Handle the form submission
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        // Implement functionality to process the advertisement data (e.g., send to server)
+        console.log(description); // Logging for demonstration; replace with actual implementation
+    };
+
+    return (
+        <div style={styles.container}>
+            <h1 style={styles.header}>New Teammate Advertisement</h1>
+            <div style={{ color: '#31708f', backgroundColor: '#d9edf7', padding: '10px', borderRadius: '5px', border: '1px solid #bce8f1', marginBottom: '20px' }}>
+                This is a placeholder page and is still in progress.
+            </div>
+            <Form onSubmit={handleSubmit}>
+                <Form.Group controlId="advertisementDescription">
+                    <Form.Label style={styles.formLabel}>Please describe the qualifications you are looking for in a teammate.</Form.Label>
+                    <FormControl
+                        as="textarea"
+                        rows={3}
+                        value={description}
+                        style={styles.formControl}
+                        onChange={(e) => setDescription(e.target.value)}
+                    />
+                </Form.Group>
+                <Button variant="primary" type="submit" style={styles.submitButton}>
+                    Create
+                </Button>
+            </Form>
+        </div>
+    );
+};
+
+export default NewTeammateAdvertisement;

src/pages/Student Teams/TeammateReview.tsx

@@ -0,0 +1,89 @@
+import React, { useState, FormEvent } from 'react';
+import { Form, Button, FormControl } from 'react-bootstrap';
+
+const TeammateReview = () => {
+    const [lateCount, setLateCount] = useState(0);  // State to track the number of times a teammate was late
+    const [comments, setComments] = useState('');  // State for storing user comments
+
+    // Inline CSS styles for component styling
+    const styles = {
+        container: {
+            fontFamily: 'Arial, sans-serif',
+            maxWidth: '1000px',
+            margin: '0 auto',
+            padding: '20px',
+            fontSize: '0.85rem',
+        },
+        header: {
+            marginBottom: '20px',
+            fontSize: '2rem',
+        },
+        formLabel: {
+            fontSize: '0.85rem',
+            fontWeight: 'bold',
+            marginBottom: '10px',
+        },
+        formControl: {
+            fontSize: '0.85rem',
+            borderColor: 'black',
+            borderRadius: '3px',
+        },
+        submitButton: {
+            backgroundColor: 'transparent',
+            borderColor: '#000',
+            borderStyle: 'solid',
+            borderRadius: '0px',
+            color: '#000',
+            fontSize: '0.85rem',
+            padding: '2px 5px',
+            marginTop: '20px',
+        },
+        starRating: {
+            cursor: 'pointer',
+            fontSize: '1.5rem',  // Larger font size for better clickability and visibility
+        },
+    };
+
+    // Handles form submission
+    const handleSubmit = (e: FormEvent) => {
+        e.preventDefault();
+        // Redirect to the view page after submitting the review
+    };
+
+    return (
+        <div style={styles.container}>
+            <h2 style={styles.header}>Teammate Review for Final Project</h2>
+            <div style={{ color: '#31708f', backgroundColor: '#d9edf7', padding: '10px', borderRadius: '5px', border: '1px solid #bce8f1', marginBottom: '20px' }}>
+                This is a placeholder page and is still in progress.
+            </div>
+            <Form onSubmit={handleSubmit}>
+                <Form.Group>
+                    <Form.Label style={styles.formLabel}>How many times was this person late to meetings?</Form.Label>
+                    <div>
+                        {/* Render stars for late count selection */}
+                        {[...Array(5)].map((_, i) => (
+                            <span key={i} style={styles.starRating} onClick={() => setLateCount(i + 1)}>
+                                {i < lateCount ? '★' : '☆'}
+                            </span>
+                        ))}
+                    </div>
+                </Form.Group>
+                <Form.Group>
+                    <Form.Label style={styles.formLabel}>Comments</Form.Label>
+                    <FormControl
+                        as="textarea"
+                        rows={3}
+                        value={comments}
+                        onChange={(e) => setComments(e.currentTarget.value)}
+                        style={styles.formControl}
+                    />
+                </Form.Group>
+                <Button variant="primary" type="submit" style={styles.submitButton}>
+                    Submit Review
+                </Button>
+            </Form>
+        </div>
+    );
+};
+
+export default TeammateReview;

src/pages/Student Teams/studentTeamsView.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+
+
+interface StudentTeamsProps {}
+
+const StudentTeamView: FC<StudentTeamsProps> =  () => (
+  <div>
+    StudentTeams Component
+  </div>
+);
+
+export default StudentTeamView;