Skip to content

Commit 7a69703

Browse files
idanidan29idanidan29
committed
adapting toolingdetailed modal and istalling dialog element
1 parent b79884b commit 7a69703

File tree

4 files changed

+396
-29
lines changed

4 files changed

+396
-29
lines changed

‎components/ui/dialog.tsx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import * as React from "react"
2+
import * as DialogPrimitive from "@radix-ui/react-dialog"
3+
import { XIcon } from "lucide-react"
4+
5+
import { cn } from "@/lib/utils"
6+
7+
function Dialog({
8+
...props
9+
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
10+
return <DialogPrimitive.Root data-slot="dialog" {...props} />
11+
}
12+
13+
function DialogTrigger({
14+
...props
15+
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
16+
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
17+
}
18+
19+
function DialogPortal({
20+
...props
21+
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
22+
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
23+
}
24+
25+
function DialogClose({
26+
...props
27+
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
28+
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
29+
}
30+
31+
function DialogOverlay({
32+
className,
33+
...props
34+
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
35+
return (
36+
<DialogPrimitive.Overlay
37+
data-slot="dialog-overlay"
38+
className={cn(
39+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
40+
className
41+
)}
42+
{...props}
43+
/>
44+
)
45+
}
46+
47+
function DialogContent({
48+
className,
49+
children,
50+
showCloseButton = true,
51+
...props
52+
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
53+
showCloseButton?: boolean
54+
}) {
55+
return (
56+
<DialogPortal data-slot="dialog-portal">
57+
<DialogOverlay />
58+
<DialogPrimitive.Content
59+
data-slot="dialog-content"
60+
className={cn(
61+
"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
62+
className
63+
)}
64+
{...props}
65+
>
66+
{children}
67+
{showCloseButton && (
68+
<DialogPrimitive.Close
69+
data-slot="dialog-close"
70+
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
71+
>
72+
<XIcon />
73+
<span className="sr-only">Close</span>
74+
</DialogPrimitive.Close>
75+
)}
76+
</DialogPrimitive.Content>
77+
</DialogPortal>
78+
)
79+
}
80+
81+
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
82+
return (
83+
<div
84+
data-slot="dialog-header"
85+
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
86+
{...props}
87+
/>
88+
)
89+
}
90+
91+
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
92+
return (
93+
<div
94+
data-slot="dialog-footer"
95+
className={cn(
96+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
97+
className
98+
)}
99+
{...props}
100+
/>
101+
)
102+
}
103+
104+
function DialogTitle({
105+
className,
106+
...props
107+
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
108+
return (
109+
<DialogPrimitive.Title
110+
data-slot="dialog-title"
111+
className={cn("text-lg leading-none font-semibold", className)}
112+
{...props}
113+
/>
114+
)
115+
}
116+
117+
function DialogDescription({
118+
className,
119+
...props
120+
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
121+
return (
122+
<DialogPrimitive.Description
123+
data-slot="dialog-description"
124+
className={cn("text-muted-foreground text-sm", className)}
125+
{...props}
126+
/>
127+
)
128+
}
129+
130+
export {
131+
Dialog,
132+
DialogClose,
133+
DialogContent,
134+
DialogDescription,
135+
DialogFooter,
136+
DialogHeader,
137+
DialogOverlay,
138+
DialogPortal,
139+
DialogTitle,
140+
DialogTrigger,
141+
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@docsearch/react": "3.9.0",
3030
"@radix-ui/react-checkbox": "^1.3.1",
3131
"@radix-ui/react-collapsible": "^1.1.11",
32+
"@radix-ui/react-dialog": "^1.1.14",
3233
"@radix-ui/react-label": "^2.1.7",
3334
"@radix-ui/react-radio-group": "^1.3.7",
3435
"@radix-ui/react-separator": "^1.1.7",

‎pages/tools/components/ToolingDetailModal.tsx‎

Lines changed: 17 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ import React, { useEffect, useState } from 'react';
22

33
import CancelIcon from '~/public/icons/cancel.svg';
44
import { Button } from '~/components/ui/button';
5+
import {
6+
Dialog,
7+
DialogContent,
8+
DialogHeader,
9+
DialogTitle,
10+
} from '~/components/ui/dialog';
511

612
import Badge from './ui/Badge';
713
import type { JSONSchemaTool } from '../JSONSchemaTool';
@@ -18,34 +24,16 @@ export default function ToolingDetailModal({
1824
tool: JSONSchemaTool;
1925
onClose: () => void;
2026
}) {
21-
useEffect(() => {
22-
document.body.classList.add('no-scroll');
23-
return () => {
24-
document.body.classList.remove('no-scroll');
25-
};
26-
}, []);
27-
28-
useEffect(() => {
29-
const clickEsc = (event: KeyboardEvent) => {
30-
if (event.key === 'Escape') {
31-
onClose();
32-
}
33-
};
34-
document.addEventListener('keydown', clickEsc);
35-
return () => {
36-
document.removeEventListener('keydown', clickEsc);
37-
};
38-
}, [onClose]);
39-
4027
return (
41-
<div className='fixed inset-0 flex items-center justify-center z-50 overflow-x-hidden'>
42-
<div
43-
className='fixed inset-0 bg-black opacity-50'
44-
onClick={onClose}
45-
></div>
46-
<div
47-
className='bg-white dark:bg-slate-800 rounded-lg p-8 max-w-full lg:max-w-4xl w-10/12 lg:w-full relative top-8 z-50 max-h-[80vh] overflow-y-auto'
48-
style={{ overflowWrap: 'anywhere' }}
28+
<Dialog open={true} onOpenChange={() => onClose()}>
29+
<DialogContent
30+
className='fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] transform-none bg-white dark:bg-slate-800 rounded-lg p-8 max-w-full lg:max-w-4xl w-10/12 lg:w-full max-h-[80vh] overflow-y-auto border-0 shadow-lg z-50'
31+
style={{
32+
overflowWrap: 'anywhere',
33+
top: 'calc(50% + 16px)', // Offset to match original positioning
34+
transform: 'translate(-50%, -50%)'
35+
}}
36+
showCloseButton={false}
4937
>
5038
<div className='flex justify-end absolute top-0 right-0 mt-6 mr-6'>
5139
<Button
@@ -347,8 +335,8 @@ export default function ToolingDetailModal({
347335
)}
348336
</div>
349337
</div>
350-
</div>
351-
</div>
338+
</DialogContent>
339+
</Dialog>
352340
);
353341
}
354342

0 commit comments

Comments
 (0)