From 25577990bd8fb4ac99d2ebba9d7fb5aefb1bec98 Mon Sep 17 00:00:00 2001
From: Johann Ruiz <johannruiz176@vt.edu>
Date: Sat, 27 Jul 2024 10:06:25 -0400
Subject: [PATCH] Adding stars with subscriptions
---
src/components/LabsListItem.css | 13 +++++++++++++
src/components/LabsListItem.tsx | 13 +++++++++++++
2 files changed, 26 insertions(+)
diff --git a/src/components/LabsListItem.css b/src/components/LabsListItem.css
index 920bb5a..3b1d096 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 f6ce95d..78d39ef 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>
--
GitLab