| 1 | import type { DevicePlatformAvailability } from "@t3tools/contracts"; |
| 2 | import { Check, Minus } from "lucide-react"; |
| 3 | import { Tooltip, TooltipTrigger, TooltipPopup } from "../ui/tooltip"; |
| 4 | |
| 5 | export function DeviceHostAvailability({ |
| 6 | platforms, |
| 7 | }: { |
| 8 | platforms: ReadonlyArray<DevicePlatformAvailability>; |
| 9 | }) { |
| 10 | return ( |
| 11 | <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground"> |
| 12 | {platforms.map((platform) => ( |
| 13 | <Tooltip key={platform.platform}> |
| 14 | <TooltipTrigger render={<span tabIndex={0} className="inline-flex items-center gap-1" />}> |
| 15 | {platform.available ? <Check className="size-3" /> : <Minus className="size-3" />} |
| 16 | {platform.platform === "ios" ? "iOS" : "Android"}{" "} |
| 17 | {platform.available ? "available" : "unavailable"} |
| 18 | </TooltipTrigger> |
| 19 | <TooltipPopup> |
| 20 | {platform.reason ?? |
| 21 | (platform.platform === "ios" ? "iOS available" : "Android available")} |
| 22 | </TooltipPopup> |
| 23 | </Tooltip> |
| 24 | ))} |
| 25 | </div> |
| 26 | ); |
| 27 | } |