111 lines
4.8 KiB
TypeScript
111 lines
4.8 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import api from "@utils/api";
|
||
import { IProject } from "../../types/IProject";
|
||
import ProjectCard from "@components/ProjectCard";
|
||
import Button from "@components/Button";
|
||
import useModalStore from "@stores/useModalStore";
|
||
import CreateProjectModal from "@components/modals/CreateProjectModal";
|
||
import ModalContainer from "@components/ModalContainer";
|
||
import EditProjectModal from "@components/modals/EditProjectModal";
|
||
import DeleteProjectModal from "@components/modals/DeleteProjectModal";
|
||
|
||
function ProjectsPage() {
|
||
const [projects, setProjects] = useState<IProject[]>([]);
|
||
const [setModal] = useModalStore((state) => [state.setModal]);
|
||
|
||
async function getProjects() {
|
||
try {
|
||
const projects: IProject[] = await api.get("projects").json();
|
||
|
||
setProjects(projects);
|
||
} catch (error) {
|
||
if (error instanceof Error) {
|
||
alert(`Error: ${error.message}`);
|
||
}
|
||
}
|
||
}
|
||
|
||
function handleClickCreateProject() {
|
||
setModal(<CreateProjectModal />);
|
||
}
|
||
|
||
useEffect(() => {
|
||
getProjects();
|
||
}, []);
|
||
|
||
return (
|
||
<div className="min-h-screen">
|
||
<div className="fixed top-0 left-0 z-10 p-4 bg-[#14161F] border-b border-white border-opacity-10 w-full shadow-2xl">
|
||
<Button onClick={handleClickCreateProject}>Добавить проект</Button>
|
||
</div>
|
||
<div className="conatiner mx-auto 2xl:px-10 xl:px-8 sm:px-6 px-4 2xl:max-w-screen-2xl mt-20">
|
||
<div className="relative py-8 flex flex-col gap-8">
|
||
<div className="grid grid-cols-3 gap-4">
|
||
{projects.map((project, index) => (
|
||
<div key={index} className="relative">
|
||
<ProjectCard {...project} />
|
||
<div className="absolute top-0 right-0 p-4 flex gap-2">
|
||
<button
|
||
onClick={() =>
|
||
setModal(<EditProjectModal projectId={project.id!} />)
|
||
}
|
||
className="group relative p-2 bg-black bg-opacity-60 hover:bg-opacity-70 transition-opacity rounded-full"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
strokeWidth={1.5}
|
||
stroke="currentColor"
|
||
className="w-6 h-6"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
|
||
/>
|
||
</svg>
|
||
<span className="pointer-events-none group-hover:opacity-100 opacity-0 transition-opacity absolute -bottom-[90%] left-[50%] -translate-x-[50%] bg-neutral-900 px-2 py-1 text-sm rounded-lg">
|
||
Редактировать
|
||
</span>
|
||
</button>
|
||
<button
|
||
onClick={() =>
|
||
setModal(<DeleteProjectModal projectId={project.id!} />)
|
||
}
|
||
className="group relative p-2 bg-black bg-opacity-60 hover:bg-opacity-70 transition-opacity rounded-full"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
strokeWidth={1.5}
|
||
stroke="currentColor"
|
||
className="w-6 h-6"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
|
||
/>
|
||
</svg>
|
||
<span className="pointer-events-none group-hover:opacity-100 opacity-0 transition-opacity absolute -bottom-[90%] left-[50%] -translate-x-[50%] bg-neutral-900 px-2 py-1 text-sm rounded-lg">
|
||
Удалить
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ModalContainer />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default ProjectsPage;
|