Adding stars with subscriptions

src/components/LabsListItem.css

@@ -10,6 +10,7 @@
     border: solid 1px var(--default-text-color);
     border-radius: 0.25em;
     width: 300px;
+    padding-top: 1.3em;
 }
 
 .lab-name {
@@ -46,3 +47,15 @@ h1, h2, h3, h4 {
     margin: 0;
 }
 
+
+
+.star-icon-container {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+.star-icon {
+    color: gold;
+    font-size: 1em;
+}
\ No newline at end of file

src/components/LabsListItem.tsx

@@ -2,17 +2,30 @@ import { useState } from 'react';
 import './LabsListItem.css';
 import LabPopup from './LabPopup';
 import { ResearchLabItem } from "../types.ts";
+import { useStudentUserContext } from "../contexts/StudentUserContext.tsx";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faStar, faStar as faStarRegular } from '@fortawesome/free-solid-svg-icons';
+
 
 export default function LabsListItem(props: { researchLabItem: ResearchLabItem }) {
     const [showPopup, setShowPopup] = useState(false);
 
+    const { student } = useStudentUserContext();
+
     const togglePopup = () => {
         setShowPopup(!showPopup);
     };
 
+    const isSubscribed = student?.subscriptions.includes(props.researchLabItem.name) || false;
+
     return (
         <>
             <li key={props.researchLabItem.id} className="lab-box">
+                <div className="star-icon-container">
+                    {isSubscribed && (
+                        <FontAwesomeIcon icon={faStar} className="star-icon" />
+                    )}
+                </div>
                 <h1 className="lab-name" title={props.researchLabItem.name} onClick={togglePopup}>
                     {props.researchLabItem.name}
                 </h1>