MicroClub Dialog

1'use client';
2 
3import * as React from 'react';
4import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
5import { XIcon } from 'lucide-react';
6 
7import { cn } from '@/lib/utils';
8import { McButton } from '@/registry/ui/mc-button';
9 
10function McDialog({ ...props }: DialogPrimitive.Root.Props) {
11  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
12}
13 
14function McDialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
15  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
16}
17 
18function McDialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
19  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
20}
21 
22function McDialogClose({ ...props }: DialogPrimitive.Close.Props) {
23  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
24}
25 
26function McDialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
27  return (
28    <DialogPrimitive.Backdrop
29      data-slot="dialog-overlay"
30      className={cn(
31        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
32        className
33      )}
34      {...props}
35    />
36  );
37}
38 
39function McDialogContent({
40  className,
41  children,
42  showCloseButton = true,
43  ...props
44}: DialogPrimitive.Popup.Props & {
45  showCloseButton?: boolean;
46}) {
47  return (
48    <McDialogPortal>
49      <McDialogOverlay />
50      <DialogPrimitive.Popup
51        data-slot="dialog-content"
52        className={cn(
53          'fixed top-1/2 left-1/2 z-50 grid w-[min(423px,calc(100%-2rem))] gap-4 rounded-lg border bg-popover p-6 text-sm text-popover-foreground opacity-100 -translate-x-1/2 -translate-y-1/2 duration-100 outline-none sm:min-h-[344px] 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',
54          className
55        )}
56        {...props}
57      >
58        {children}
59        {showCloseButton && (
60          <DialogPrimitive.Close
61            data-slot="dialog-close"
62            render={
63              <McButton
64                variant="tertiary"
65                className="absolute top-2 right-2 !bg-transparent text-muted-foreground shadow-none hover:!bg-transparent hover:text-foreground active:text-foreground focus:outline-none focus-visible:ring-0 focus-visible:ring-transparent focus-visible:shadow-none"
66                size="sm"
67                icon="only"
68// … truncated