Hover cardstandard

import {  Example,  ExampleWrapper,} from "@/components/example"import { Button } from "@/components/ui/button"import {  Dialog,  DialogContent,  DialogDescription,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog"import {  HoverCard,  HoverCardContent,  HoverCardTrigger,} from "@/components/ui/hover-card"
export default function HoverCardExample() {  return (    <ExampleWrapper>      <HoverCardSides />      <HoverCardInDialog />    </ExampleWrapper>  )}
const HOVER_CARD_SIDES = [  "inline-start",  "left",  "top",  "bottom",  "right",  "inline-end",] as const
function HoverCardSides() {  return (    <Example title="Sides" containerClassName="col-span-2">      <div className="flex flex-wrap items-center justify-center gap-2">        {HOVER_CARD_SIDES.map((side) => (          <HoverCard key={side}>            <HoverCardTrigger              delay={100}              closeDelay={100}              render={<Button variant="outline" className="capitalize" />}            >              {side.replace("-", " ")}            </HoverCardTrigger>            <HoverCardContent side={side}>              <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">                <h4 className="font-medium">Hover Card</h4>                <p>                  This hover card appears on the {side.replace("-", " ")} side                  of the trigger.                </p>              </div>            </HoverCardContent>          </HoverCard>        ))}      </div>    </Example>  )}
function HoverCardInDialog() {  return (    <Example title="In Dialog">      <Dialog>        <DialogTrigger render={<Button variant="outline" />}>          Open Dialog        </DialogTrigger>        <DialogContent>          <DialogHeader>            <DialogTitle>Hover Card Example</DialogTitle>            <DialogDescription>              Hover over the button below to see the hover card.            </DialogDescription>          </DialogHeader>          <HoverCard>            <HoverCardTrigger              delay={100}              closeDelay={100}              render={<Button variant="outline" className="w-fit" />}            >              Hover me            </HoverCardTrigger>            <HoverCardContent>              <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">                <h4 className="font-medium">Hover Card</h4>                <p>                  This hover card appears inside a dialog. Hover over the button                  to see it.                </p>              </div>            </HoverCardContent>          </HoverCard>        </DialogContent>      </Dialog>    </Example>  )}