completed LabsPage.tsx and corresponding components

src/components/FilterLabsLinks.tsx

+import {ResearchLabProps} from "../types.ts";
+import {NavLink} from "react-router-dom";
+import {labsPagePath} from "../utils.ts";
+
+export default function FilterLabsLinks(props: ResearchLabProps) {
+    const collegeLinks = props.researchLabs.map((lab) => {
+        // const icon = category.name in icons ? icons[category.name] : '';
+        return (
+            <li key={lab.id}>
+                <NavLink to={`${labsPagePath}/${lab.college}`}>{lab.college}</NavLink>
+            </li>
+        );
+    });
+
+    return <ul>{collegeLinks}</ul>;
+}
\ No newline at end of file

src/components/LabsList.css

+#lab-boxes {
+    display: flex;
+    justify-content: left;
+    flex-wrap: wrap;
+    padding: 1em;
+    gap: 1em;
+}

src/components/LabsList.tsx

+import './LabsList.css';
+import {ResearchLabProps} from "../types.ts";
+import LabsListItem from "./LabsListItem.tsx";
+
+export default function LabsList(props: ResearchLabProps) {
+
+    const labsList = props.researchLabs.map((researchLab) => (
+        <LabsListItem researchLabItem={researchLab}/>
+    ));
+
+    return <section className="labs-list">
+        <ul id="lab-boxes">{labsList}</ul>
+    </section>;
+}

src/components/LabsListItem.css

+.lab-box {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    padding: 0.5em;
+    gap: 0.1em;
+    border: solid 1px var(--default-text-color);
+    border-radius: 0.25em;
+    width: 300px;
+}
+
+.lab-name {
+    font-weight: bolder;
+    text-decoration: underline;
+}
+
+.lab-college {
+    font-weight: lighter;
+}
+
+.lab-pi {
+    font-style: italic;
+}
+
+.lab-description {
+    height: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.lab-description:hover {
+    cursor: default;
+}
+
+h1, h2, h3, h4 {
+    padding: 5px;
+    margin: 0;
+}
\ No newline at end of file

src/components/LabsListItem.tsx

+import {ResearchLabItem} from "../types.ts";
+import './LabsListItem.css';
+import {Link} from "react-router-dom";
+
+export default function LabsListItem(props: { researchLabItem: ResearchLabItem }) {
+    return (
+        <li key={props.researchLabItem.id} className="lab-box">
+            <Link to={`${props.researchLabItem.url}`}><h1 className="lab-name"
+                                                          title={props.researchLabItem.name}>{props.researchLabItem.name}</h1>
+            </Link>
+
+            <h2 className="lab-college">{props.researchLabItem.college}</h2>
+            <h3 className="lab-pi">Dr. John Wick</h3>
+            <h4 className="lab-description"
+                title={props.researchLabItem.description}>{props.researchLabItem.description}</h4>
+        </li>
+    );
+}
\ No newline at end of file

src/pages/LabsPage.css

+.labs-page {
+    display: flex;
+    flex-direction: row;
+    /*align-items: center;*/
+    padding: 1em;
+}
+
+.labs-nav {
+    padding: 1em;
+    text-wrap: nowrap;
+    border: double 5px var(--tertiary-color);
+}
+
+.labs-nav ul {
+    display: flex;
+    flex-direction: column;
+}
+
+.labs-nav ul li {
+    padding: 1em 0;
+}
+
+.labs-content {
+    display: flex;
+    flex-direction: column;
+    //holder them to left of the column
+    justify-content: left;
+    padding: 1em;
+}
+
+.labs-title {
+    text-align: left;
+}
\ No newline at end of file

src/pages/LabsPage.tsx

@@ -4,9 +4,11 @@ import './LabsPage.css';
 import {labsAPI, loginPagePath} from "../utils.ts";
 import {useNavigate} from "react-router-dom";
 import {ResearchLabItem} from "../types.ts";
+import LabsList from "../components/LabsList.tsx";
+import FilterLabsLinks from "../components/FilterLabsLinks.tsx";
 
 export default function LabsPage() {
-    const [researchLabItem, setResearchLabItem] = useState<ResearchLabItem[]>([]);
+    const [researchLabs, setResearchLabs] = useState<ResearchLabItem[]>([]);
     const [loading, setLoading] = useState<boolean>(true);
     const [error, setError] = useState<string | null>(null);
     const navigate = useNavigate();
@@ -27,7 +29,7 @@ export default function LabsPage() {
             }
         })
             .then(response => {
-                setResearchLabItem(response.data);
+                setResearchLabs(response.data);
                 setLoading(false);
             })
             .catch(error => {
@@ -46,12 +48,14 @@ export default function LabsPage() {
 
     return (
         <div className='labs-page center-content'>
-            <h1>Data from Endpoint</h1>
-            <ul>
-                {researchLabItem.map(item => (
-                    <li key={item.id}>{item.name}</li>
-                ))}
-            </ul>
+            <div className='labs-nav'>
+                <h2 className='labs-nav-title'>Filter Options</h2>
+                <FilterLabsLinks researchLabs={researchLabs}/>
+            </div>
+            <div className='labs-content'>
+                <h1 className='labs-title'>Research Labs</h1>
+                <LabsList researchLabs={researchLabs}/>
+            </div>
         </div>
     );
 }
\ No newline at end of file

src/types.ts

 export interface ResearchLabItem {
     id: number;
     name: string;
-    // Add other fields as needed
+    url: string;
+    pi: string;
+    college: string;
+    description: string;
 }
 
 export interface WelcomeProps {
@@ -15,4 +18,8 @@ export interface AppHeaderProps {
 
 export interface LoginProps {
     onLogin: (token: string) => void;
+}
+
+export interface ResearchLabProps {
+    researchLabs: ResearchLabItem[];
 }
\ No newline at end of file