62 lines
1.5 KiB
JavaScript
62 lines
1.5 KiB
JavaScript
import { useParams } from "react-router-dom";
|
|
import { useRecoilValue } from "recoil";
|
|
import { projectsAtom } from "../store";
|
|
import ImageGallery from "react-image-gallery";
|
|
import Tags from "../components/Tags";
|
|
|
|
function ExperianceDetail() {
|
|
const { id } = useParams();
|
|
const experianceList = useRecoilValue(projectsAtom);
|
|
|
|
//shorter variant of Find function with IF-sats
|
|
const myProject = experianceList.find((item) => item.id === id);
|
|
|
|
if (myProject === undefined) {
|
|
return (
|
|
<div className="container mx-auto my-10 px-6">
|
|
404 the project does not exists
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const projectImg = myProject.img.map((item) => {
|
|
return { original: item, thumbnail: item };
|
|
});
|
|
|
|
let linkUI = <></>;
|
|
|
|
if (myProject.link !== undefined) {
|
|
linkUI = (
|
|
<a href={myProject.link} target="_blank">
|
|
Visit page
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto my-10 px-6">
|
|
<div className="flex">
|
|
<div className="flex-1">
|
|
<h1>Project: {myProject.title}</h1>
|
|
</div>
|
|
|
|
<Tags listOfTags={myProject.tags} />
|
|
</div>
|
|
{linkUI}
|
|
<div className="py-4 mb-8">{myProject.info}</div>
|
|
<div className="">
|
|
<ImageGallery
|
|
showThumbnails={false}
|
|
showBullets={true}
|
|
autoPlay={true}
|
|
slideDuration={1000}
|
|
slideInterval={4000}
|
|
items={projectImg}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ExperianceDetail;
|