Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
'use client' | |
import * as React from 'react' | |
import * as DialogPrimitive from '@radix-ui/react-dialog' | |
import { X } from 'lucide-react' | |
import { cn } from '@/lib/utils/cn' | |
const Dialog = DialogPrimitive.Root | |
const DialogTrigger = DialogPrimitive.Trigger | |
const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => ( | |
<DialogPrimitive.Portal {...props} /> | |
) | |
DialogPortal.displayName = DialogPrimitive.Portal.displayName | |
const DialogOverlay = React.forwardRef< | |
React.ElementRef<typeof DialogPrimitive.Overlay>, | |
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> | |
>(({ className, ...props }, ref) => ( | |
<DialogPrimitive.Overlay | |
ref={ref} | |
className={cn( | |
'fixed inset-0 z-50 blur-sm backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-stone-900/50', | |
className | |
)} | |
{...props} | |
/> | |
)) | |
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName | |
const DialogContent = React.forwardRef< | |
React.ElementRef<typeof DialogPrimitive.Content>, | |
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> | |
>(({ className, children, ...props }, ref) => ( | |
<DialogPortal> | |
<DialogOverlay /> | |
<DialogPrimitive.Content | |
ref={ref} | |
className={cn( | |
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-stone-200 bg-white p-6 shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-stone-800 dark:bg-stone-900 sm:rounded-lg md:w-full', | |
className | |
)} | |
{...props} | |
> | |
{children} | |
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity data-[state=open]:bg-stone-100 data-[state=open]:text-stone-500 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 disabled:pointer-events-none dark:ring-offset-stone-950 dark:data-[state=open]:bg-stone-800 dark:data-[state=open]:text-stone-400 dark:focus:ring-stone-800"> | |
<X className="h-4 w-4" /> | |
<span className="sr-only">Close</span> | |
</DialogPrimitive.Close> | |
</DialogPrimitive.Content> | |
</DialogPortal> | |
)) | |
DialogContent.displayName = DialogPrimitive.Content.displayName | |
const DialogHeader = ({ | |
className, | |
...props | |
}: React.HTMLAttributes<HTMLDivElement>) => ( | |
<div | |
className={cn( | |
'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={cn( | |
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', | |
className | |
)} | |
{...props} | |
/> | |
) | |
DialogFooter.displayName = 'DialogFooter' | |
const DialogTitle = React.forwardRef< | |
React.ElementRef<typeof DialogPrimitive.Title>, | |
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> | |
>(({ className, ...props }, ref) => ( | |
<DialogPrimitive.Title | |
ref={ref} | |
className={cn( | |
'text-lg font-semibold leading-none tracking-tight', | |
className | |
)} | |
{...props} | |
/> | |
)) | |
DialogTitle.displayName = DialogPrimitive.Title.displayName | |
const DialogDescription = React.forwardRef< | |
React.ElementRef<typeof DialogPrimitive.Description>, | |
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> | |
>(({ className, ...props }, ref) => ( | |
<DialogPrimitive.Description | |
ref={ref} | |
className={cn('text-sm text-stone-500 dark:text-stone-400', className)} | |
{...props} | |
/> | |
)) | |
DialogDescription.displayName = DialogPrimitive.Description.displayName | |
export { | |
Dialog, | |
DialogTrigger, | |
DialogContent, | |
DialogHeader, | |
DialogFooter, | |
DialogTitle, | |
DialogDescription, | |
} | |