Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
1.7 kB · 62 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263"use client";
import { UTCDate } from "@date-fns/utc";import { HoverCard, HoverCardContent, HoverCardTrigger,} from "@openstatus/ui/components/ui/hover-card";import { format, formatDistanceToNowStrict } from "date-fns";import type { ComponentPropsWithoutRef } from "react";
import { CopyRow } from "./copy-row";
// TODO: move to TableCellDate?
type HoverCardContentProps = ComponentPropsWithoutRef<typeof HoverCardContent>;
interface HoverCardTimestampProps { date: Date; side?: HoverCardContentProps["side"]; sideOffset?: HoverCardContentProps["sideOffset"]; align?: HoverCardContentProps["align"]; alignOffset?: HoverCardContentProps["alignOffset"]; children?: React.ReactNode;}
export function HoverCardTimestamp({ date, side = "right", align = "start", alignOffset = -4, sideOffset, children,}: HoverCardTimestampProps) { const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
return ( <HoverCard openDelay={0} closeDelay={0}> <HoverCardTrigger asChild>{children}</HoverCardTrigger> <HoverCardContent className="z-10 w-auto p-2" {...{ side, align, alignOffset, sideOffset }} > <dl className="flex flex-col gap-1"> <CopyRow value={String(date.getTime())} label="Timestamp" /> <CopyRow value={format(new UTCDate(date), "LLL dd, y HH:mm:ss")} label="UTC" /> <CopyRow value={format(date, "LLL dd, y HH:mm:ss")} label={timezone} /> <CopyRow value={formatDistanceToNowStrict(date, { addSuffix: true })} label="Relative" /> </dl> </HoverCardContent> </HoverCard> );}