animated-tooltip-status-demo

1"use client";
2 
3import { StatusTooltip } from "@/components/ui/animated-tooltip";
4import { cn } from "@/lib/utils";
5 
6export default function AnimatedTooltipStatusDemo() {
7  return (
8    <div className="flex flex-wrap items-center justify-center gap-6">
9      {(["online", "away", "busy", "offline"] as const).map((status) => (
10        <StatusTooltip key={status} status={status}>
11          <div className="flex items-center gap-2 rounded-lg border bg-card px-3 py-2">
12            <div
13              className={cn(
14                "h-2.5 w-2.5 rounded-full",
15                status === "online" && "bg-green-500",
16                status === "away" && "bg-yellow-500",
17                status === "busy" && "bg-red-500",
18                status === "offline" && "bg-gray-400",
19              )}
20            />
21            <span className="font-medium text-sm capitalize">{status}</span>
22          </div>
23        </StatusTooltip>
24      ))}
25    </div>
26  );
27}