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,87 @@
+"use client";
+
+import { motion, AnimatePresence } from "motion/react";
+import { useState } from "react";
+import ActionMenu from "./action-menu";
+
+type App = {
+  id: string;
+  name: string;
+  description?: string;
+  address: string;
+  ssh_addr?: string;
+};
+
+interface Props {
+  app: App;
+}
+
+export default function AppCard({ app }: Props) {
+  let pingStatus = true;
+
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      className={`
+        relative
+        rounded-2xl
+        bg-gray-100
+        p-3
+        ${hovered && "border bg-white"}
+        transition-all
+        duration-200
+      `}
+    >
+      <div className="absolute top-4 right-4">
+        <div className="relative">
+          <div className="absolute inset-0 rounded-full bg-green-500 animate-ping opacity-30" />
+          <div className="relative h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-white" />
+        </div>
+      </div>
+
+      <h3 className="text-2xl font-bold">{app.name}</h3>
+      <a
+        className={`${hovered && "text-blue-600"} transition-colors duration-200`}
+        target="_blank"
+        href={`http://${app.address}`}
+      >
+        {app.address}
+      </a>
+      {/*<AnimatePresence>
+        {hovered && (
+          <motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.2 }}
+          >
+            {app.description && <span>{app.description}</span>}
+            <ActionMenu id={app.id} />
+          </motion.div>
+        )}
+      </AnimatePresence>*/}
+
+      <AnimatePresence>
+        {hovered && (
+          <motion.div
+            initial={{ opacity: 0, y: -4 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -4 }}
+            transition={{ duration: 0.15 }}
+            className={`absolute bottom-3 left-3 right-3 ${app.description && "bg-white"} pt-2 flex flex-col gap-1`}
+          >
+            {app.description && (
+              <span className="text-sm text-muted-foreground">
+                {app.description}
+              </span>
+            )}
+            <ActionMenu id={app.id} />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}