88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
"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>
|
|
);
|
|
}
|