返回 oh-my-ppt
AlertDialog.tsx
根目录 / src / renderer / src / components / ui / AlertDialog.tsx
1 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
2 import React from 'react'
3 import { cn } from '@renderer/lib/utils'
4
5 const AlertDialog = AlertDialogPrimitive.Root
6 const AlertDialogTrigger = AlertDialogPrimitive.Trigger
7 const AlertDialogPortal = AlertDialogPrimitive.Portal
8
9 const AlertDialogOverlay = React.forwardRef<
10 React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
11 React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
12 >(({ className, ...props }, ref) => (
13 <AlertDialogPrimitive.Overlay
14 ref={ref}
15 className={cn('fixed inset-0 z-50 bg-[#1f261d]/38 backdrop-blur-sm', className)}
16 {...props}
17 />
18 ))
19 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
20
21 const AlertDialogContent = React.forwardRef<
22 React.ElementRef<typeof AlertDialogPrimitive.Content>,
23 React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
24 >(({ className, ...props }, ref) => (
25 <AlertDialogPortal>
26 <AlertDialogOverlay />
27 <AlertDialogPrimitive.Content
28 ref={ref}
29 className={cn(
30 'fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-[#d8cfbc]/80 bg-[#fffaf0] p-5 shadow-[0_24px_60px_rgba(64,52,38,0.28)]',
31 className
32 )}
33 {...props}
34 />
35 </AlertDialogPortal>
36 ))
37 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
38
39 const AlertDialogTitle = React.forwardRef<
40 React.ElementRef<typeof AlertDialogPrimitive.Title>,
41 React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
42 >(({ className, ...props }, ref) => (
43 <AlertDialogPrimitive.Title
44 ref={ref}
45 className={cn('text-base font-semibold text-[#3e4a32]', className)}
46 {...props}
47 />
48 ))
49 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
50
51 const AlertDialogDescription = React.forwardRef<
52 React.ElementRef<typeof AlertDialogPrimitive.Description>,
53 React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
54 >(({ className, ...props }, ref) => (
55 <AlertDialogPrimitive.Description
56 ref={ref}
57 className={cn('text-sm leading-6 text-[#6f6658]', className)}
58 {...props}
59 />
60 ))
61 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
62
63 const AlertDialogAction = React.forwardRef<
64 React.ElementRef<typeof AlertDialogPrimitive.Action>,
65 React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
66 >(({ className, ...props }, ref) => (
67 <AlertDialogPrimitive.Action
68 ref={ref}
69 className={cn(
70 'inline-flex h-9 items-center justify-center rounded-[10px] px-4 text-sm font-medium transition-colors',
71 className
72 )}
73 {...props}
74 />
75 ))
76 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
77
78 const AlertDialogCancel = React.forwardRef<
79 React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
80 React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
81 >(({ className, ...props }, ref) => (
82 <AlertDialogPrimitive.Cancel
83 ref={ref}
84 className={cn(
85 'inline-flex h-9 items-center justify-center rounded-[10px] border border-[#d7cbb7]/80 bg-[#fffdf8]/92 px-4 text-sm font-medium text-[#657058] transition-colors hover:bg-[#f5efe4]',
86 className
87 )}
88 {...props}
89 />
90 ))
91 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
92
93 export {
94 AlertDialog,
95 AlertDialogAction,
96 AlertDialogCancel,
97 AlertDialogContent,
98 AlertDialogDescription,
99 AlertDialogTitle,
100 AlertDialogTrigger
101 }
102
102 lines Plain Text