e6b9b42f6c
Some checks failed
CI/CD Pipeline - Xpeditis PreProd / Backend - Build & Test (push) Failing after 5m51s
CI/CD Pipeline - Xpeditis PreProd / Backend - Docker Build & Push (push) Has been skipped
CI/CD Pipeline - Xpeditis PreProd / Frontend - Build & Test (push) Successful in 10m57s
CI/CD Pipeline - Xpeditis PreProd / Frontend - Docker Build & Push (push) Failing after 12m28s
CI/CD Pipeline - Xpeditis PreProd / Deploy to PreProd Server (push) Has been skipped
CI/CD Pipeline - Xpeditis PreProd / Run Smoke Tests (push) Has been skipped
94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
|
|
const Dialog = ({ children, open, onOpenChange }: any) => {
|
|
return (
|
|
<>
|
|
{React.Children.map(children, (child) =>
|
|
React.cloneElement(child, { open, onOpenChange })
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const DialogTrigger = ({ children, asChild, onOpenChange }: any) => {
|
|
if (asChild) {
|
|
return React.cloneElement(children, {
|
|
onClick: () => onOpenChange?.(true),
|
|
});
|
|
}
|
|
return (
|
|
<button onClick={() => onOpenChange?.(true)} type="button">
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
const DialogContent = React.forwardRef<HTMLDivElement, any>(
|
|
({ className, children, open, onOpenChange, ...props }, ref) => {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
|
|
onClick={() => onOpenChange?.(false)}
|
|
/>
|
|
<div className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg">
|
|
<div ref={ref} className={className} {...props}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
);
|
|
DialogContent.displayName = 'DialogContent';
|
|
|
|
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
|
<div
|
|
className={`flex flex-col space-y-1.5 text-center sm:text-left ${className || ''}`}
|
|
{...props}
|
|
/>
|
|
);
|
|
DialogHeader.displayName = 'DialogHeader';
|
|
|
|
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
|
<div
|
|
className={`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ${className || ''}`}
|
|
{...props}
|
|
/>
|
|
);
|
|
DialogFooter.displayName = 'DialogFooter';
|
|
|
|
const DialogTitle = React.forwardRef<
|
|
HTMLHeadingElement,
|
|
React.HTMLAttributes<HTMLHeadingElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<h3
|
|
ref={ref}
|
|
className={`text-lg font-semibold leading-none tracking-tight ${className || ''}`}
|
|
{...props}
|
|
/>
|
|
));
|
|
DialogTitle.displayName = 'DialogTitle';
|
|
|
|
const DialogDescription = React.forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<p ref={ref} className={`text-sm text-muted-foreground ${className || ''}`} {...props} />
|
|
));
|
|
DialogDescription.displayName = 'DialogDescription';
|
|
|
|
export {
|
|
Dialog,
|
|
DialogTrigger,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogFooter,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
};
|