damus.io

damus.io website
git clone git://jb55.com/damus.io
Log | Files | Refs | README | LICENSE

AlertDialog.tsx (4459B)

      1 // Based on https://ui.shadcn.com and MIT licensed.
      2 
      3 "use client"
      4 
      5 import * as React from "react"
      6 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
      7 
      8 import { cn } from "@/lib/utils"
      9 import { buttonVariants } from "./Button"
     10 
     11 const AlertDialog = AlertDialogPrimitive.Root
     12 
     13 const AlertDialogTrigger = AlertDialogPrimitive.Trigger
     14 
     15 const AlertDialogPortal = AlertDialogPrimitive.Portal
     16 
     17 const AlertDialogOverlay = React.forwardRef<
     18   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
     19   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
     20 >(({ className, ...props }, ref) => (
     21   <AlertDialogPrimitive.Overlay
     22     className={cn(
     23       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
     24       className
     25     )}
     26     {...props}
     27     ref={ref}
     28   />
     29 ))
     30 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
     31 
     32 const AlertDialogContent = React.forwardRef<
     33   React.ElementRef<typeof AlertDialogPrimitive.Content>,
     34   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
     35 >(({ className, ...props }, ref) => (
     36   <AlertDialogPortal>
     37     <AlertDialogOverlay />
     38     <AlertDialogPrimitive.Content
     39       ref={ref}
     40       className={cn(
     41         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg 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%] sm:rounded-lg",
     42         className
     43       )}
     44       {...props}
     45     />
     46   </AlertDialogPortal>
     47 ))
     48 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
     49 
     50 const AlertDialogHeader = ({
     51   className,
     52   ...props
     53 }: React.HTMLAttributes<HTMLDivElement>) => (
     54   <div
     55     className={cn(
     56       "flex flex-col space-y-2 text-center sm:text-left",
     57       className
     58     )}
     59     {...props}
     60   />
     61 )
     62 AlertDialogHeader.displayName = "AlertDialogHeader"
     63 
     64 const AlertDialogFooter = ({
     65   className,
     66   ...props
     67 }: React.HTMLAttributes<HTMLDivElement>) => (
     68   <div
     69     className={cn(
     70       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
     71       className
     72     )}
     73     {...props}
     74   />
     75 )
     76 AlertDialogFooter.displayName = "AlertDialogFooter"
     77 
     78 const AlertDialogTitle = React.forwardRef<
     79   React.ElementRef<typeof AlertDialogPrimitive.Title>,
     80   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
     81 >(({ className, ...props }, ref) => (
     82   <AlertDialogPrimitive.Title
     83     ref={ref}
     84     className={cn("text-lg font-semibold", className)}
     85     {...props}
     86   />
     87 ))
     88 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
     89 
     90 const AlertDialogDescription = React.forwardRef<
     91   React.ElementRef<typeof AlertDialogPrimitive.Description>,
     92   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
     93 >(({ className, ...props }, ref) => (
     94   <AlertDialogPrimitive.Description
     95     ref={ref}
     96     className={cn("text-sm text-gray-500", className)}
     97     {...props}
     98   />
     99 ))
    100 AlertDialogDescription.displayName =
    101   AlertDialogPrimitive.Description.displayName
    102 
    103 const AlertDialogAction = React.forwardRef<
    104   React.ElementRef<typeof AlertDialogPrimitive.Action>,
    105   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
    106 >(({ className, ...props }, ref) => (
    107   <AlertDialogPrimitive.Action
    108     ref={ref}
    109     className={cn(buttonVariants(), className)}
    110     {...props}
    111   />
    112 ))
    113 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
    114 
    115 const AlertDialogCancel = React.forwardRef<
    116   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
    117   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
    118 >(({ className, ...props }, ref) => (
    119   <AlertDialogPrimitive.Cancel
    120     ref={ref}
    121     className={cn(
    122       buttonVariants({ variant: "default" }),
    123       "mt-2 sm:mt-0",
    124       className
    125     )}
    126     {...props}
    127   />
    128 ))
    129 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
    130 
    131 export {
    132   AlertDialog,
    133   AlertDialogPortal,
    134   AlertDialogOverlay,
    135   AlertDialogTrigger,
    136   AlertDialogContent,
    137   AlertDialogHeader,
    138   AlertDialogFooter,
    139   AlertDialogTitle,
    140   AlertDialogDescription,
    141   AlertDialogAction,
    142   AlertDialogCancel,
    143 }