import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"; import { cn } from "~/lib/utils"; const PreviewCard = PreviewCardPrimitive.Root; function PreviewCardTrigger(props: PreviewCardPrimitive.Trigger.Props) { return <PreviewCardPrimitive.Trigger data-slot="preview-card-trigger" {...props} />;} function PreviewCardPopup({ className, align = "start", side = "top", sideOffset = 6, ...props}: PreviewCardPrimitive.Popup.Props & { align?: PreviewCardPrimitive.Positioner.Props["align"]; side?: PreviewCardPrimitive.Positioner.Props["side"]; sideOffset?: PreviewCardPrimitive.Positioner.Props["sideOffset"];}) { return ( <PreviewCardPrimitive.Portal> <PreviewCardPrimitive.Positioner align={align} className="z-[140] max-w-(--available-width)" data-slot="preview-card-positioner" side={side} sideOffset={sideOffset} > <PreviewCardPrimitive.Popup className={cn( "origin-(--transform-origin) rounded-lg border bg-popover text-popover-foreground shadow-lg outline-none transition-[scale,opacity] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0", className, )} data-slot="preview-card-popup" {...props} /> </PreviewCardPrimitive.Positioner> </PreviewCardPrimitive.Portal> );} export { PreviewCard, PreviewCardPopup, PreviewCardTrigger };
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
import { cn } from "~/lib/utils";
const PreviewCard = PreviewCardPrimitive.Root;
function PreviewCardTrigger(props: PreviewCardPrimitive.Trigger.Props) {
return <PreviewCardPrimitive.Trigger data-slot="preview-card-trigger" {...props} />;
}
function PreviewCardPopup({
className,
align = "start",
side = "top",
sideOffset = 6,
...props
}: PreviewCardPrimitive.Popup.Props & {
align?: PreviewCardPrimitive.Positioner.Props["align"];
side?: PreviewCardPrimitive.Positioner.Props["side"];
sideOffset?: PreviewCardPrimitive.Positioner.Props["sideOffset"];
}) {
return (
<PreviewCardPrimitive.Portal>
<PreviewCardPrimitive.Positioner
align={align}
className="z-[140] max-w-(--available-width)"
data-slot="preview-card-positioner"
side={side}
sideOffset={sideOffset}
>
<PreviewCardPrimitive.Popup
className={cn(
"origin-(--transform-origin) rounded-lg border bg-popover text-popover-foreground shadow-lg outline-none transition-[scale,opacity] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0",
className,
)}
data-slot="preview-card-popup"
{...props}
/>
</PreviewCardPrimitive.Positioner>
</PreviewCardPrimitive.Portal>
);
}
export { PreviewCard, PreviewCardPopup, PreviewCardTrigger };