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

[feat] change js to jsx

Browse source
This commit is contained in:
Alvalen 2023-09-05 21:44:18 +07:00
parent 3d53a8f54a
commit 1d6029d536
16 changed files with 0 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,159 +0,0 @@
"use client";
import { useState, useEffect } from "react";
import jsonData from "../../../json/data.json";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import NotFound from "@/app/not-found";
import Image from "next/image";
function Page({ params }) {
const [data, setData] = useState(null);
useEffect(() => {
const selectedData = jsonData.Projects.find(
(item) => item.slug === params.slug
);
if (selectedData === undefined) {
setData("404");
} else {
setData(selectedData);
}
}, [params.slug]);
if (data === "404") {
return (
<>
<NotFound />
</>
);
} 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 mt-10 md:mt-0">
<div className="flex justify-center items-start flex-col mb-5 space-y-10 mx-auto">
<div>
<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
Project
</h2>
<h1 className="text-4xl font-medium text-neutral-900">
{data.title}
</h1>
</div>
<div>
<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
Technology
</h2>
<p className="text-2xl font-normal text-neutral-900">
{data.tech.join(", ")}
</p>
</div>
<div>
<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
Year
</h2>
<p className="text-2xl font-normal text-neutral-900">
{data.year}
</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">
Description
</h2>
{data.desc.map((desc, index) => (
<p
key={index}
className="text-xl text-justify tracking-wide font-normal text-gray-500 mb-5">
{desc}
</p>
))}
</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">
{data.images.map((image, index) => (
<Image
key={index}
src={image}
alt={`Project Image ${index + 1}`}
className="w-full h-full mb-5"
width={1920}
height={1080}
/>
))}
</div>
</div>
</div>
);
}
export default Page;