106 lines
2.7 KiB
TypeScript
106 lines
2.7 KiB
TypeScript
'use client'
|
|
import { use } from 'react'
|
|
|
|
import { redirect, RedirectType } from 'next/navigation'
|
|
import { useSharedData } from '@/app/context/ProjectContext';
|
|
import { useMountTransition } from '@/hooks/useAnimations';
|
|
import "../../../styles/markdown-container.css";
|
|
import Link from 'next/link';
|
|
import { PROJECTS } from '@/data/content';
|
|
|
|
export default function ProjectPage({
|
|
params,
|
|
}: {params: Promise<{ slug: string }>}) {
|
|
|
|
const mounted = useMountTransition(50)
|
|
const { slug } = use(params);
|
|
|
|
if (!slug) redirect('project',RedirectType.replace);
|
|
|
|
const hasValidProject = PROJECTS.find((v)=>v.slug == slug)
|
|
const hasValidDetails = hasValidProject && PROJECTS.find((v)=>v.slug == slug)?.details
|
|
const projectDetails = useSharedData();
|
|
|
|
return (
|
|
<div
|
|
id="project-markdown-container"
|
|
className={"markdown-container"}
|
|
style={{
|
|
opacity: mounted ? 1 : 0,
|
|
transition: "all 0.5s ease",
|
|
translate: mounted ? "0 2em" : "0 0"
|
|
}}
|
|
>
|
|
|
|
{
|
|
hasValidDetails ?
|
|
(
|
|
<main dangerouslySetInnerHTML={{ __html: projectDetails }}>
|
|
</main>
|
|
) : (
|
|
<p>This project has no details set up for it yet.</p>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
<div style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: "1em",
|
|
marginBottom: "2em"
|
|
}}>
|
|
<Link onClick={(e)=>{
|
|
window.scrollTo({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}}
|
|
|
|
className="expand-on-hover-button"
|
|
style={{
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 15,
|
|
color: "var(--fg)",
|
|
border: "1px solid var(--border)",
|
|
backgroundColor: "var(--bg)",
|
|
height: "3em",
|
|
display: "block",
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
textAlign: "center",
|
|
width: "10em",
|
|
borderRadius: "var(--radius-md)",
|
|
|
|
}} href={"#"}>Back To Top</Link>
|
|
|
|
<Link onClick={(e)=>{
|
|
window.scrollTo({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}}
|
|
|
|
className="expand-on-hover-button"
|
|
style={{
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 15,
|
|
color: "var(--fg)",
|
|
border: "1px solid var(--border)",
|
|
backgroundColor: "var(--bg)",
|
|
height: "3em",
|
|
display: "block",
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
textAlign: "center",
|
|
width: "10em",
|
|
borderRadius: "var(--radius-md)",
|
|
|
|
}} href={"/project"}>More Projects</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|