MicroClub Hover Card

1'use client';
2 
3import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
4 
5import { cn } from '@/lib/utils';
6 
7function McHoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
8  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
9}
10 
11function McHoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
12  return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
13}
14 
15function McHoverCardContent({
16  className,
17  side = 'bottom',
18  sideOffset = 4,
19  align = 'center',
20  alignOffset = 4,
21  textAlign = 'start',
22  imageSrc = null,
23  imageposition = 'top',
24  title,
25  subtitle,
26  description,
27  ...props
28}: PreviewCardPrimitive.Popup.Props &
29  Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
30    textAlign?: 'start' | 'center';
31    imageSrc?: string | null;
32    imageposition?: 'top' | 'bottom';
33    title?: string;
34    subtitle?: string;
35    description?: string;
36  }) {
37  return (
38    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
39      <PreviewCardPrimitive.Positioner
40        align={align}
41        alignOffset={alignOffset}
42        side={side}
43        sideOffset={sideOffset}
44        className="isolate z-50 w-76 origin-(--transform-origin) rounded-lg bg-card p-4 text-sm text-popover-foreground shadow-md ring-inset  ring-1 ring-border flex flex-col "
45      >
46        <div className={`${imageposition === 'top' ? 'flex-col' : 'flex-col-reverse'} flex gap-4`}>
47          {imageSrc && <img src={imageSrc} alt="Profile" className={`w-full    `} />}
48          <div
49            className={`${textAlign === 'start' ? 'items-start' : 'items-center'} flex flex-col gap-2`}
50          >
51            {title && <h4 className="font-semibold text-card-foreground">{title}</h4>}
52            <div
53              className={`${textAlign === 'start' ? 'items-start' : 'text-center'} flex flex-col`}
54            >
55              {subtitle && <p className=" font-regular text-card-foreground">{subtitle}</p>}
56              {description && <p className="font-regular text-card-foreground">{description}</p>}
57            </div>
58          </div>
59        </div>
60 
61        <PreviewCardPrimitive.Popup
62          data-slot="hover-card-content"
63          className={cn(
64            ' outline-hidden duration-100   ',
65            ' data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 ',
66// … truncated