Preview Card

1"use client";
2 
3import "./preview-card.css";
4import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { PreviewCardContext, usePreviewCardContext } from "./preview-card.context";
9import { previewCardVariants, type PreviewCardVariants } from "./preview-card.variants";
10 
11export type PreviewCardProps = PreviewCardVariants &
12  React.ComponentProps<typeof BasePreviewCard.Root>;
13 
14export const PreviewCardRoot = ({ children, size, ...props }: PreviewCardProps) => {
15  const slots = previewCardVariants({ size });
16 
17  return (
18    <PreviewCardContext.Provider value={{ slots }}>
19      <BasePreviewCard.Root {...props}>{children}</BasePreviewCard.Root>
20    </PreviewCardContext.Provider>
21  );
22};
23 
24export type PreviewCardTriggerProps = React.ComponentProps<typeof BasePreviewCard.Trigger>;
25 
26export const PreviewCardTrigger = ({ className, ...props }: PreviewCardTriggerProps) => {
27  const { slots } = usePreviewCardContext();
28  return <BasePreviewCard.Trigger className={cn(slots.trigger(), className)} {...props} />;
29};
30 
31export type PreviewCardPortalProps = React.ComponentProps<typeof BasePreviewCard.Portal>;
32 
33export const PreviewCardPortal = (props: PreviewCardPortalProps) => {
34  return <BasePreviewCard.Portal {...props} />;
35};
36 
37export type PreviewCardBackdropProps = React.ComponentProps<typeof BasePreviewCard.Backdrop>;
38 
39export const PreviewCardBackdrop = ({ className, ...props }: PreviewCardBackdropProps) => {
40  const { slots } = usePreviewCardContext();
41  return <BasePreviewCard.Backdrop className={cn(slots.backdrop(), className)} {...props} />;
42};
43 
44export type PreviewCardPositionerProps = React.ComponentProps<typeof BasePreviewCard.Positioner>;
45 
46export const PreviewCardPositioner = ({
47  className,
48  sideOffset = 8,
49  ...props
50}: PreviewCardPositionerProps) => {
51  const { slots } = usePreviewCardContext();
52  return (
53    <BasePreviewCard.Positioner
54      className={cn(slots.positioner(), className)}
55      sideOffset={sideOffset}
56      {...props}
57    />
58  );
59};
60 
61export type PreviewCardPopupProps = React.ComponentProps<typeof BasePreviewCard.Popup>;
62 
63export const PreviewCardPopup = ({ className, ...props }: PreviewCardPopupProps) => {
64  const { slots } = usePreviewCardContext();
65  return <BasePreviewCard.Popup className={cn(slots.popup(), className)} {...props} />;
66};
67 
68export type PreviewCardArrowProps = React.ComponentProps<typeof BasePreviewCard.Arrow>;
69 
70// … truncated