import React from 'react';
import { useParams } from 'react-router-dom';
import projects from 'projects';
import style from './ProjectDetail.scss';
import bulma from 'bulma.scss';

const ProjectDetail = () => {
	const { projectId } = useParams();

	const project = projects.find(project => project.slug == projectId);

	return (
		<div>
			<h1 className={style.title}>{project.title}</h1>
			<p className={style.subtitle}>{project.subtitle}</p>

			<img className={style.masthead} src={project.thumbnail} alt="" />

			<section className={style.description}>
				{project.description}
			</section>
		</div>
	);
};

export default ProjectDetail;

import React from 'react';
import { Link, useParams } from 'react-router-dom';
import HorizontalList from './HorizontalList';
import projects from 'projects';
import style from './ProjectDetail.scss';

const getProjectLink = (index, text) => {
	const project = projects[index];
	if (project) {
		return <Link to={`/projects/${project.slug}`}>{text}</Link>;
	} else {
		return <span>{text}</span>;
	}
};

const ProjectDetail = () => {
	const { projectId } = useParams();

	const project = projects.find(project => project.slug == projectId);
	const index = projects.indexOf(project);

	return (
		<div>
			<h1 className={style.title}>{project.title}</h1>
			<p className={style.subtitle}>{project.subtitle}</p>

			<img className={style.masthead} src={project.thumbnail} alt="" />

			<section className={style.description}>
				{project.description}
			</section>

			<HorizontalList isCentered>
				{getProjectLink(index-1, '< Prev')}
				<Link to="/">Home</Link>
				{getProjectLink(index+1, 'Next >')}
			</HorizontalList>
		</div>
	);
};

export default ProjectDetail;

Add prev/next links on project details
Add prev/next links on project details
