File size: 1,633 Bytes
c30ea2a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import { cn } from "@/lib/utils";
import { useResumeStore } from "@/store/useResumeStore";
import { Reorder } from "framer-motion";
import { PlusCircle } from "lucide-react";
import { useTranslations } from "@/i18n/compat/client";
import { Button } from "@/components/ui/button";
import ProjectItem from "./ProjectItem";
import { Project } from "@/types/resume";
import { generateUUID } from "@/utils/uuid";
const ProjectPanel = () => {
const t = useTranslations("workbench.projectPanel");
const { activeResume, updateProjects, updateProjectsBatch } =
useResumeStore();
const { projects = [] } = activeResume || {};
const handleCreateProject = () => {
const newProject: Project = {
id: generateUUID(),
name: t("defaultProject.name"),
role: t("defaultProject.role"),
date: t("defaultProject.date"),
description: t("defaultProject.description"),
visible: true,
};
updateProjects(newProject);
};
return (
<div
className={cn(
"space-y-4 px-4 py-4 rounded-lg",
"bg-card border-border",
)}
>
<Reorder.Group
axis="y"
values={projects}
onReorder={(newOrder) => {
updateProjectsBatch(newOrder);
}}
className="space-y-3"
>
{projects.map((project) => (
<ProjectItem key={project.id} project={project}></ProjectItem>
))}
<Button onClick={handleCreateProject} className="w-full">
<PlusCircle className="w-4 h-4 mr-2" />
{t("addButton")}
</Button>
</Reorder.Group>
</div>
);
};
export default ProjectPanel;
|