Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitde470db

Browse files
committed
updated dialog ui
1 parent36a102d commitde470db

File tree

1 file changed

+34
-34
lines changed

1 file changed

+34
-34
lines changed

‎components/ui/dialog.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
1-
"use client";
1+
"use client"
22

3-
import*asReactfrom"react";
4-
import*asDialogPrimitivefrom"@radix-ui/react-dialog";
5-
import{X}from"lucide-react";
3+
import*asReactfrom"react"
4+
import*asDialogPrimitivefrom"@radix-ui/react-dialog"
5+
import{X}from"lucide-react"
66

7-
import{cn}from"@/lib/utils";
7+
import{cn}from"@/lib/utils"
88

9-
constDialog=DialogPrimitive.Root;
9+
constDialog=DialogPrimitive.Root
1010

11-
constDialogTrigger=DialogPrimitive.Trigger;
11+
constDialogTrigger=DialogPrimitive.Trigger
1212

13-
constDialogPortal=({
14-
className,
15-
...props
16-
}:DialogPrimitive.DialogPortalProps)=>(
17-
<DialogPrimitive.PortalclassName={cn(className)}{...props}/>
18-
);
19-
DialogPortal.displayName=DialogPrimitive.Portal.displayName;
13+
constDialogPortal=DialogPrimitive.Portal
14+
15+
constDialogClose=DialogPrimitive.Close
2016

2117
constDialogOverlay=React.forwardRef<
2218
React.ElementRef<typeofDialogPrimitive.Overlay>,
@@ -26,12 +22,12 @@ const DialogOverlay = React.forwardRef<
2622
ref={ref}
2723
className={cn(
2824
"fixed inset-0 z-50 bg-background/80 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",
29-
className,
25+
className
3026
)}
3127
{...props}
3228
/>
33-
));
34-
DialogOverlay.displayName=DialogPrimitive.Overlay.displayName;
29+
))
30+
DialogOverlay.displayName=DialogPrimitive.Overlay.displayName
3531

3632
constDialogContent=React.forwardRef<
3733
React.ElementRef<typeofDialogPrimitive.Content>,
@@ -42,19 +38,20 @@ const DialogContent = React.forwardRef<
4238
<DialogPrimitive.Content
4339
ref={ref}
4440
className={cn(
45-
"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 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 md:w-full",
46-
className,
41+
"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 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
4743
)}
48-
{...props}>
44+
{...props}
45+
>
4946
{children}
5047
<DialogPrimitive.CloseclassName="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
5148
<XclassName="h-4 w-4"/>
5249
<spanclassName="sr-only">Close</span>
5350
</DialogPrimitive.Close>
5451
</DialogPrimitive.Content>
5552
</DialogPortal>
56-
));
57-
DialogContent.displayName=DialogPrimitive.Content.displayName;
53+
))
54+
DialogContent.displayName=DialogPrimitive.Content.displayName
5855

5956
constDialogHeader=({
6057
className,
@@ -63,12 +60,12 @@ const DialogHeader = ({
6360
<div
6461
className={cn(
6562
"flex flex-col space-y-1.5 text-center sm:text-left",
66-
className,
63+
className
6764
)}
6865
{...props}
6966
/>
70-
);
71-
DialogHeader.displayName="DialogHeader";
67+
)
68+
DialogHeader.displayName="DialogHeader"
7269

7370
constDialogFooter=({
7471
className,
@@ -77,12 +74,12 @@ const DialogFooter = ({
7774
<div
7875
className={cn(
7976
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
80-
className,
77+
className
8178
)}
8279
{...props}
8380
/>
84-
);
85-
DialogFooter.displayName="DialogFooter";
81+
)
82+
DialogFooter.displayName="DialogFooter"
8683

8784
constDialogTitle=React.forwardRef<
8885
React.ElementRef<typeofDialogPrimitive.Title>,
@@ -92,12 +89,12 @@ const DialogTitle = React.forwardRef<
9289
ref={ref}
9390
className={cn(
9491
"text-lg font-semibold leading-none tracking-tight",
95-
className,
92+
className
9693
)}
9794
{...props}
9895
/>
99-
));
100-
DialogTitle.displayName=DialogPrimitive.Title.displayName;
96+
))
97+
DialogTitle.displayName=DialogPrimitive.Title.displayName
10198

10299
constDialogDescription=React.forwardRef<
103100
React.ElementRef<typeofDialogPrimitive.Description>,
@@ -108,15 +105,18 @@ const DialogDescription = React.forwardRef<
108105
className={cn("text-sm text-muted-foreground",className)}
109106
{...props}
110107
/>
111-
));
112-
DialogDescription.displayName=DialogPrimitive.Description.displayName;
108+
))
109+
DialogDescription.displayName=DialogPrimitive.Description.displayName
113110

114111
export{
115112
Dialog,
113+
DialogPortal,
114+
DialogOverlay,
115+
DialogClose,
116116
DialogTrigger,
117117
DialogContent,
118118
DialogHeader,
119119
DialogFooter,
120120
DialogTitle,
121121
DialogDescription,
122-
};
122+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp