Hover Card

import { Button } from "@/components/button"import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/hover-card"const HOVER_CARD_SIDES = ["top", "right", "bottom", "left"] as constexport function HoverCardSides() {  return (    <div className="flex flex-col gap-6">      <div className="flex flex-wrap items-center justify-center gap-4">        {HOVER_CARD_SIDES.map((side) => (          <HoverCard key={side} openDelay={100} closeDelay={100}>            <HoverCardTrigger asChild>              <Button                variant="outline"                className="capitalize style-sera:uppercase"              >                {side}              </Button>            </HoverCardTrigger>            <HoverCardContent side={side} className="w-64">              <div className="flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2">                <h4 className="font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide">                  Hover Card                </h4>                <p className="style-sera:leading-relaxed">                  This hover card appears on the {side} side of the trigger.                </p>              </div>            </HoverCardContent>          </HoverCard>        ))}      </div>    </div>  )}

import { Button } from "@/components/button"import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/dialog"import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/hover-card"export function HoverCardInDialog() {  return (    <div className="flex flex-col gap-6">      <Dialog>        <DialogTrigger asChild>          <Button variant="outline">Open Dialog</Button>        </DialogTrigger>        <DialogContent>          <DialogHeader>            <DialogTitle>Hover Card Example</DialogTitle>            <DialogDescription>              Hover over the button below to see the hover card.            </DialogDescription>          </DialogHeader>          <HoverCard openDelay={100} closeDelay={100}>            <HoverCardTrigger asChild>              <Button variant="outline" className="w-fit">                Hover me              </Button>            </HoverCardTrigger>            <HoverCardContent className="w-64">              <div className="flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2">                <h4 className="font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide">                  Hover Card                </h4>                <p className="style-sera:leading-relaxed">                  This hover card appears inside a dialog. Hover over the button                  to see it.                </p>              </div>            </HoverCardContent>          </HoverCard>        </DialogContent>      </Dialog>    </div>  )}