Preview Card

1import * as React from 'react';
2 
3import {
4  PreviewCard as PreviewCardPrimitive,
5  PreviewCardTrigger as PreviewCardTriggerPrimitive,
6  PreviewCardPortal as PreviewCardPortalPrimitive,
7  PreviewCardPositioner as PreviewCardPositionerPrimitive,
8  PreviewCardPopup as PreviewCardPopupPrimitive,
9  PreviewCardBackdrop as PreviewCardBackdropPrimitive,
10  type PreviewCardProps as PreviewCardPrimitiveProps,
11  type PreviewCardTriggerProps as PreviewCardTriggerPrimitiveProps,
12  type PreviewCardPositionerProps as PreviewCardPositionerPrimitiveProps,
13  type PreviewCardPopupProps as PreviewCardPopupPrimitiveProps,
14  type PreviewCardBackdropProps as PreviewCardBackdropPrimitiveProps,
15} from '@/components/animate-ui/primitives/base/preview-card';
16import { cn } from '@/lib/utils';
17 
18type PreviewCardProps = PreviewCardPrimitiveProps;
19 
20function PreviewCard(props: PreviewCardProps) {
21  return <PreviewCardPrimitive {...props} />;
22}
23 
24type PreviewCardTriggerProps = PreviewCardTriggerPrimitiveProps;
25 
26function PreviewCardTrigger(props: PreviewCardTriggerProps) {
27  return <PreviewCardTriggerPrimitive {...props} />;
28}
29 
30type PreviewCardPanelProps = PreviewCardPositionerPrimitiveProps &
31  PreviewCardPopupPrimitiveProps;
32 
33function PreviewCardPanel({
34  className,
35  align = 'center',
36  sideOffset = 4,
37  style,
38  children,
39  ...props
40}: PreviewCardPanelProps) {
41  return (
42    <PreviewCardPortalPrimitive>
43      <PreviewCardPositionerPrimitive
44        align={align}
45        sideOffset={sideOffset}
46        className="z-50"
47        {...props}
48      >
49        <PreviewCardPopupPrimitive
50          className={cn(
51            'bg-popover text-popover-foreground w-64 origin-(--transform-origin) rounded-md border p-4 shadow-md outline-hidden',
52            className,
53          )}
54          style={style}
55        >
56          {children}
57        </PreviewCardPopupPrimitive>
58      </PreviewCardPositionerPrimitive>
59    </PreviewCardPortalPrimitive>
60  );
61}
62 
63type PreviewCardBackdropProps = PreviewCardBackdropPrimitiveProps;
64 
65function PreviewCardBackdrop(props: PreviewCardBackdropProps) {
66  return <PreviewCardBackdropPrimitive {...props} />;
67}
68 
69export {
70  PreviewCard,
71  PreviewCardTrigger,
72  PreviewCardPanel,
73  PreviewCardBackdrop,
74  type PreviewCardProps,
75  type PreviewCardTriggerProps,
76  type PreviewCardPanelProps,
77  type PreviewCardBackdropProps,
78};