MicroClub Popover

1'use client';
2import * as React from 'react';
3import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
4import { cn } from '@/lib/utils';
5function McPopover({ ...props }: PopoverPrimitive.Root.Props) {
6  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
7}
8function McPopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
9  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
10}
11function McPopoverContent({
12  className,
13  align = 'center',
14  alignOffset = 0,
15  side = 'bottom',
16  sideOffset = 23,
17  ...props
18}: PopoverPrimitive.Popup.Props &
19  Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
20  return (
21    <PopoverPrimitive.Portal>
22      <PopoverPrimitive.Positioner
23        align={align}
24        alignOffset={alignOffset}
25        side={side}
26        sideOffset={sideOffset}
27        className="isolate z-50"
28      >
29        <PopoverPrimitive.Popup
30          data-slot="popover-content"
31          className={cn(
32            'z-50 flex h-[268px] w-[276px] origin-(--transform-origin) flex-col gap-[13px] rounded-lg bg-card p-4 text-sm text-card-foreground shadow-sm outline-hidden duration-100 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 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
33            className
34          )}
35          {...props}
36        />
37      </PopoverPrimitive.Positioner>
38    </PopoverPrimitive.Portal>
39  );
40}
41 
42function McPopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
43  return (
44    <div
45      data-slot="popover-header"
46      className={cn('flex flex-col gap-[9px] text-sm', className)}
47      {...props}
48    />
49  );
50}
51 
52function McPopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
53  return (
54    <PopoverPrimitive.Title
55      data-slot="popover-title"
56      className={cn(
57        'font-plus-jakarta-sans text-left text-[20px] leading-[30px] font-medium tracking-[0] text-card-foreground',
58        className
59      )}
60      {...props}
61    />
62  );
63}
64function McPopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {
65  return (
66    <PopoverPrimitive.Description
67      data-slot="popover-description"
68      className={cn(
69// … truncated