openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
4import type * as React from "react";
5
6import { cn } from "@/lib/utils";
7
8function HoverCard({
9 ...props
10}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
11 return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
12}
13
14function HoverCardTrigger({
15 ...props
16}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
17 return (
18 <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
19 );
20}
21
22function HoverCardContent({
23 className,
24 align = "center",
25 sideOffset = 4,
26 ...props
27}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
28 return (
29 <HoverCardPrimitive.Portal data-slot="hover-card-portal">
30 <HoverCardPrimitive.Content
31 data-slot="hover-card-content"
32 align={align}
33 sideOffset={sideOffset}
34 className={cn(
35 "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
36 className,
37 )}
38 {...props}
39 />
40 </HoverCardPrimitive.Portal>
41 );
42}
43
44export { HoverCard, HoverCardTrigger, HoverCardContent };