v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[feat] add project content

Browse source
This commit is contained in:
Alvalen 2023-09-03 21:21:04 +07:00
parent b64d7fb30d
commit 923b86aa71
2 changed files with 229 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

126
app/projects/[slug]/page.js
View file

@ -1,7 +1,10 @@
"use client";
import { useState, useEffect } from "react";
import jsonData from "../../../json/data.json";
import Image from "next/image";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
function Page({ params }) {
const [data, setData] = useState(null);
@ -9,17 +12,64 @@ function Page({ params }) {
const selectedData = jsonData.Projects.find(
(item) => item.slug === params.slug
);
setData(selectedData);
if (selectedData === undefined) {
setData("404");
} else {
setData(selectedData);
}
}, [params.slug]);
if (!data) {
return <p>Loading...</p>;
if (data === "404") {
return (
<div className="relative min-h-screen w-full gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
<div className="min-h-screen flex justify-center items-center">
<div className="mx-auto grid grid-cols-1 ">
<div className="flex justify-center items-center flex-col mb-5 space-y-10">
<div>
<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400 text-center">
Page not found
</h2>
<h1 className="text-4xl font-medium text-neutral-900 text-center">
404
</h1>
</div>
</div>
</div>
</div>
</div>
);
} else if (!data) {
// skleton loading
return (
<div className="relative min-h-screen w-full gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
<div className="min-h-screen flex justify-center items-center w-full">
<div className="mx-auto grid grid-cols-1 md:grid-cols-2 w-full">
<div className="flex justify-center items-start flex-col mb-5 space-y-10 w-ful p-4">
<div className="animate-pulse bg-neutral-200 h-20 w-full rounded"></div>
<div className="animate-pulse bg-neutral-200 h-20 w-full rounded"></div>
<div className="animate-pulse bg-neutral-200 h-20 w-full rounded"></div>
<div className="animate-pulse bg-neutral-200 h-20 w-full rounded"></div>
<div className="animate-pulse bg-neutral-200 h-20 w-full rounded"></div>
</div>
<div className="flex justify-start items-start flex-col mb-5 w-full p-4">
<div className="animate-pulse duration-500 shadow-lg bg-neutral-200 rounded w-full h-full "></div>
</div>
</div>
</div>
{/* images */}
<div className="mx-auto grid grid-cols-1 p-5 md:p-20 w-full h-auto">
<div className="w-full h-auto aspect-video">
<div className="animate-pulse duration-500 shadow-lg bg-neutral-200 h-full w-full rounded"></div>
</div>
</div>
</div>
);
}
return (
<div className="relative min-h-screen w-full gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
<div className="min-h-screen flex justify-center items-center">
<div className="mx-auto grid grid-cols-1 md:grid-cols-2 ">
<div className="mx-auto grid grid-cols-1 md:grid-cols-2 mt-10 md:mt-0">
<div className="flex justify-center items-start flex-col mb-5 space-y-10">
<div>
<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
@ -45,32 +95,44 @@ function Page({ params }) {
{data.year}
</p>
</div>
<div>
<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
Preview
</h2>
<p className="text-2xl font-normal text-neutral-900">
<a
href={data.preview}
target="_blank"
rel="noopener noreferrer">
{data.preview}
</a>
</p>
</div>
<div>
<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
Source Code
</h2>
<p className="text-2xl font-normal text-neutral-900">
<a
href={data.code}
target="_blank"
rel="noopener noreferrer">
{data.code}
</a>
</p>
</div>
{data.preview && (
<div>
<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
Preview
</h2>
<p className="text-2xl font-normal text-neutral-900">
<a
href={data.preview}
target="_blank"
rel="noopener noreferrer">
Preview{" "}
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="ml-3"
/>
</a>
</p>
</div>
)}
{data.code && (
<div>
<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
Source Code
</h2>
<p className="text-2xl font-normal text-neutral-900">
<a
href={data.code}
target="_blank"
rel="noopener noreferrer">
Github{" "}
<FontAwesomeIcon
icon={faGithub}
className="ml-3"
/>
</a>
</p>
</div>
)}
</div>
<div className="flex justify-start items-start flex-col mb-5 ">
<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
@ -79,7 +141,7 @@ function Page({ params }) {
{data.desc.map((desc, index) => (
<p
key={index}
className="text-2xl font-normal text-gray-600 mb-5">
className="text-xl text-justify tracking-wide font-normal text-gray-500 mb-5">
{desc}
</p>
))}