Spaces:
Running
Running
File size: 3,796 Bytes
c10f8f8 290d608 c10f8f8 290d608 c10f8f8 ddb7f1c c10f8f8 ddb7f1c c10f8f8 ddb7f1c c10f8f8 ddb7f1c c10f8f8 3767b20 c10f8f8 ac6c296 c10f8f8 5da9322 c10f8f8 813f0e0 290d608 c10f8f8 290d608 c10f8f8 d738d0d c10f8f8 d738d0d c10f8f8 |
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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
"use client";
import { Plus } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import { toast } from "sonner";
import { useUser } from "@/hooks/useUser";
import { ProjectType } from "@/types";
import { ProjectCard } from "./project-card";
import { MAX_FREE_PROJECTS } from "@/lib/utils";
import { ProTag } from "@/components/pro-modal";
import { Button } from "@/components/ui/button";
import { useProModal } from "@/components/contexts/pro-context";
import { api } from "@/lib/api";
import { NotLogged } from "../not-logged/not-logged";
export function MyProjects() {
const { user, projects, setProjects } = useUser();
const { openProModal } = useProModal();
if (!user) {
return <NotLogged />;
}
const onDelete = async (project: ProjectType) => {
const response = await api.delete(`/me/projects/${project.name}`);
if (response.data.ok) {
toast.success("Project deleted successfully!");
const newProjects = projects.filter((p) => p.id !== project.id);
setProjects(newProjects);
} else {
toast.error(response.data.error);
}
};
return (
<>
<section className="max-w-[86rem] py-12 px-4 mx-auto overflow-x-hidden">
<header className="flex items-center justify-between max-lg:flex-col gap-4">
<div className="text-left">
<h1 className="text-3xl font-bold text-white">
<span className="capitalize">{user?.fullname}</span>'s
DeepSite Projects
{user?.isPro ? (
""
) : (
<span className="text-neutral-400 text-2xl ml-2">
({projects.length}/{MAX_FREE_PROJECTS})
</span>
)}
</h1>
<p className="text-muted-foreground text-lg mt-1 max-w-xl">
{user?.isPro ? (
"Create, manage, and explore your DeepSite projects."
) : (
<span>
Upgrade to{" "}
<ProTag className="mx-1" onClick={() => openProModal([])} />{" "}
to create unlimited projects with DeepSite.
</span>
)}
</p>
</div>
{projects?.length >= MAX_FREE_PROJECTS && !user?.isPro ? (
<Button
size="default"
variant="default"
onClick={() => openProModal([])}
>
Upgrade to PRO
</Button>
) : (
// <LoadProject onSuccess={() => {}} />
<div></div>
)}
</header>
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
{projects.length < MAX_FREE_PROJECTS || user?.isPro ? (
<Link
href="/new"
className="bg-neutral-900 rounded-xl h-64 lg:h-44 flex items-center justify-center text-neutral-300 border border-neutral-800 hover:brightness-110 transition-all duration-200"
>
<Plus className="size-5 mr-1.5" />
Create Project
</Link>
) : (
<div
className="bg-neutral-900 rounded-xl h-64 lg:h-44 flex items-center justify-center text-neutral-300 border border-neutral-800 hover:brightness-110 transition-all duration-200 cursor-pointer"
onClick={() => openProModal([])}
>
<Plus className="size-5 mr-1.5" />
Create Project
</div>
)}
{projects.map((project: ProjectType, index: number) => (
<ProjectCard
key={index}
project={project}
onDelete={() => onDelete(project)}
/>
))}
</div>
</section>
</>
);
}
|