app cards with action menu and tooltips

2026-06-27 00:00:13 -05:00
parent 91ef732eeb
commit 69f269efc7
10 changed files with 236 additions and 16 deletions
@@ -0,0 +1,83 @@
+import { Terminal, Pencil, FileTerminal } from "lucide-react";
+import { motion } from "motion/react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+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";
+  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
+                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>
+  );
+}