Files
desktop-app/components/action-menu.tsx
T

113 lines
3.0 KiB
TypeScript

"use client";
import { Terminal, Pencil, FileTerminal, Trash } from "lucide-react";
import { motion } from "motion/react";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import DeleteDialog from "./delete-dialog";
import { useState } from "react";
type Props = {
id: string;
};
export default function ActionMenu({ id }: Props) {
const buttonClass =
"flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-all duration-150 hover:bg-green-50 hover:text-green-600 active:scale-95";
const [open, setOpen] = useState(false);
return (
<>
<TooltipProvider delayDuration={150}>
<motion.div
initial={{ opacity: 0, y: 8, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 8, scale: 0.95 }}
transition={{
type: "spring",
stiffness: 450,
damping: 28,
}}
className="flex justify-end"
>
<div className="flex flex-row justify-end gap-1.5">
<Tooltip>
<TooltipTrigger asChild>
<button onClick={() => setOpen(true)} className={buttonClass}>
<Trash className="h-5 w-5" />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Delete</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
className={buttonClass}
onClick={() => {
// SSH
}}
>
<Terminal className="h-5 w-5" />
</button>
</TooltipTrigger>
<TooltipContent>
<p>SSH</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
className={buttonClass}
onClick={() => {
// Blog
}}
>
<Pencil className="h-5 w-5" />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Create Blog</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
className={buttonClass}
onClick={() => {
// Scripts
}}
>
<FileTerminal className="h-5 w-5" />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Run Scripts</p>
</TooltipContent>
</Tooltip>
</div>
</motion.div>
</TooltipProvider>
<DeleteDialog
open={open}
onOpenChange={(open) => {
console.log("DeleteDialog open state changed:", open);
setOpen(open);
}}
id={id}
/>
</>
);
}