preview-card

1"use client"
2 
3import * as React from "react"
4import { PreviewCard as BasePreviewCard } from "@base-ui/react"
5 
6import { cn } from "@/lib/utils"
7 
8function PreviewCard({
9	...props
10}: React.ComponentProps<typeof BasePreviewCard.Root>) {
11	return <BasePreviewCard.Root data-slot="preview-card" {...props} />
12}
13 
14function PreviewCardTrigger({
15	...props
16}: React.ComponentProps<typeof BasePreviewCard.Trigger>) {
17	return (
18		<BasePreviewCard.Trigger
19			delay={0}
20			closeDelay={0}
21			data-slot="preview-card-trigger"
22			{...props}
23		/>
24	)
25}
26 
27function PreviewCardPortal({
28	...props
29}: React.ComponentProps<typeof BasePreviewCard.Portal>) {
30	return <BasePreviewCard.Portal data-slot="preview-card-portal" {...props} />
31}
32 
33function PreviewCardPositioner({
34	...props
35}: React.ComponentProps<typeof BasePreviewCard.Positioner>) {
36	return (
37		<BasePreviewCard.Positioner
38			data-slot="preview-card-positioner"
39			{...props}
40		/>
41	)
42}
43 
44function PreviewCardArrow({
45	...props
46}: React.ComponentProps<typeof BasePreviewCard.Arrow>) {
47	return <BasePreviewCard.Arrow data-slot="preview-card-arrow" {...props} />
48}
49 
50function PreviewCardContent({
51	className,
52	children,
53	align = "center",
54	sideOffset = 8,
55	arrow = true,
56	...props
57}: React.ComponentProps<typeof BasePreviewCard.Popup> & {
58	align?: BasePreviewCard.Positioner.Props["align"]
59	sideOffset?: BasePreviewCard.Positioner.Props["sideOffset"]
60	arrow?: boolean
61}) {
62	return (
63		<PreviewCardPortal>
64			<PreviewCardPositioner sideOffset={sideOffset} align={align}>
65				<BasePreviewCard.Popup
66					data-slot="preview-card-content"
67					className={cn(
68						"bg-popover text-popover-foreground outline-border z-50 w-64 origin-(--transform-origin) rounded-md p-4 shadow-md outline -outline-offset-1 transition-[transform,scale,opacity] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
69						className
70					)}
71					{...props}
72				>
73					{arrow && (
74						<PreviewCardArrow className="data-[side=bottom]:-top-2 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-2 data-[side=top]:rotate-180">
75							<svg width="20" height="10" viewBox="0 0 20 10" fill="none">
76								<path
77									d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
78									className="fill-popover"
79// … truncated