import "./ProjectDetails.css" import SkillCard from "../SkillCard/SkillCard.jsx"; import React, {useEffect, useState} from "react"; import NavBar from "../NavBar/NavBar.jsx"; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import {useNavigate} from "react-router-dom"; function ProjectDetails({project}) { const [mdTitle, setMdTitle] = useState([]); const navigate = useNavigate(); useEffect(() =>{ if (!project.long_description) return; const matches = [...project.long_description.matchAll(/^## (?!#)(.+)$/gm)]; setMdTitle(matches.map(match => match[1].trim())); }, [project.long_description]) const handleSummaryClick = (event, anchor) => { event.preventDefault(); const element = document.getElementById(anchor); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }; return (

{project.title} {project.school ? ( ) : null}
{typeof project.repo_link === "string" && project.repo_link.length > 0 ? ( {project.repo_link.includes("github") ? ( ) : ( )} ) : null}

{project.end_year === null ? (

{project.beginning_year + ' – in progress'}

) : project.beginning_year === project.end_year ? (

{project.beginning_year}

) : (

{project.beginning_year + ' – ' + project.end_year}

)}

{project.short_description}

; } }} > {project.long_description} {[...Array(project.nb_image)].map((_, i) => ( ${project.image_name}$ ))}

); } export default ProjectDetails