forked from github/plane
64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
// ui
|
||
|
|
import { Disclosure, Transition } from "@headlessui/react";
|
||
|
|
import { Button, Loader } from "@plane/ui";
|
||
|
|
// icons
|
||
|
|
import { ChevronDown, ChevronUp } from "lucide-react";
|
||
|
|
// types
|
||
|
|
import { IProject } from "types";
|
||
|
|
|
||
|
|
export interface IDeleteProjectSection {
|
||
|
|
projectDetails: IProject;
|
||
|
|
handleDelete: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) => {
|
||
|
|
const { projectDetails, handleDelete } = props;
|
||
|
|
return (
|
||
|
|
<Disclosure as="div" className="border-t border-custom-border-400">
|
||
|
|
{({ open }) => (
|
||
|
|
<div className="w-full">
|
||
|
|
<Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4">
|
||
|
|
<span className="text-xl tracking-tight">Delete Project</span>
|
||
|
|
{open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
|
||
|
|
</Disclosure.Button>
|
||
|
|
|
||
|
|
<Transition
|
||
|
|
show={open}
|
||
|
|
enter="transition duration-100 ease-out"
|
||
|
|
enterFrom="transform opacity-0"
|
||
|
|
enterTo="transform opacity-100"
|
||
|
|
leave="transition duration-75 ease-out"
|
||
|
|
leaveFrom="transform opacity-100"
|
||
|
|
leaveTo="transform opacity-0"
|
||
|
|
>
|
||
|
|
<Disclosure.Panel>
|
||
|
|
<div className="flex flex-col gap-8">
|
||
|
|
<span className="text-sm tracking-tight">
|
||
|
|
The danger zone of the project delete page is a critical area that requires careful consideration and
|
||
|
|
attention. When deleting a project, all of the data and resources within that project will be
|
||
|
|
permanently removed and cannot be recovered.
|
||
|
|
</span>
|
||
|
|
<div>
|
||
|
|
{projectDetails ? (
|
||
|
|
<div>
|
||
|
|
<Button variant="danger" onClick={handleDelete}>
|
||
|
|
Delete my project
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<Loader className="mt-2 w-full">
|
||
|
|
<Loader.Item height="38px" width="144px" />
|
||
|
|
</Loader>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Disclosure.Panel>
|
||
|
|
</Transition>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Disclosure>
|
||
|
|
);
|
||
|
|
};
|