diff --git a/src/components/LabsListItem.css b/src/components/LabsListItem.css index 920bb5a3bbd5381d50fffb3576c01f9c26c8ac43..3b1d09657b90ddeb39d2de1196d47d4c37eb15b6 100644 --- a/src/components/LabsListItem.css +++ b/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 diff --git a/src/components/LabsListItem.tsx b/src/components/LabsListItem.tsx index f6ce95d61a85e8abd368eb466e0e47d952302fd9..78d39ef07c323dcf5bb2fc56c27d43acc7b7c69e 100644 --- a/src/components/LabsListItem.tsx +++ b/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>