🚀 feat(cardComponent): add dialog component for confirmation before deleting a card

🚀 feat(formModal): increase font size of input variables section title for better readability
This commit is contained in:
Lucas Oliveira 2023-06-30 16:03:44 -03:00
commit 2f4426d49f
2 changed files with 27 additions and 4 deletions

View file

@ -11,6 +11,8 @@ import {
Card,
CardHeader,
} from "../ui/card";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
import { Button } from "@mui/material";
export const CardComponent = ({
flow,
@ -39,9 +41,25 @@ export const CardComponent = ({
{flow.name}
</span>
{onDelete && (
<button className="flex self-start" onClick={onDelete}>
<Dialog>
<DialogTrigger asChild>
<button className="flex self-start">
<Trash2 className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-all" />
</button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. Are you sure you want to permanently
delete this file from our servers?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button type="submit" onClick={onDelete}>Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)}
</CardTitle>
<CardDescription className="pt-2 pb-2">

View file

@ -406,13 +406,18 @@ export default function FormModal({
<div className="flex h-[80vh] w-full mt-2 ">
<div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
<div className="flex justify-between items-center">
<div className="flex py-2 items-center">
<div className="flex py-2 items-center">
<Variable className="w-4 h-4 mr-1 text-primary"></Variable>
<span className="text-sm font-semibold text-primary">
<span className="text-md font-semibold text-primary">
Input Variables
</span>
</div>
<div className="flex justify-between items-center">
<div className="flex mr-2.5 py-2 items-center">
<span className="text-sm font-semibold text-primary">
Name
</span>
</div>
<div className="flex mr-2.5 py-2 items-center">
<span className="text-sm font-semibold text-primary">
Chat Input