Skip to content

Commit 5b57b4a

Browse files
xyzqmxyzqm
committed
clean up modals
1 parent 053fdf3 commit 5b57b4a

File tree

3 files changed

+222
-247
lines changed

3 files changed

+222
-247
lines changed

‎src/components/Editor/AddProblemModal.tsx

+43-67
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { Dialog, Transition } from '@headlessui/react';
1+
import { Dialog } from '@headlessui/react';
22
import prettier from 'prettier';
33
import babelParser from 'prettier/parser-babel';
44
import React, { useRef, useState } from 'react';
5+
import Modal from '../Modal';
56
import CopyButton from './CopyButton';
67
import parse, { parsers } from './parsers/parse';
78
async function getHtml(url: string): Promise<string> {
@@ -52,77 +53,52 @@ ${Object.keys(parsers)
5253
setStatus('Get Metadata');
5354
}
5455
}
55-
export default function AddProblemModal({ isOpen, onClose }) {
56+
export default function AddProblemModal(props: {
57+
isOpen: boolean;
58+
onClose: () => void;
59+
}) {
5660
const linkRef = useRef<HTMLInputElement>(null);
5761
const [metadata, setMetadata] = useState('// metadata will appear here');
5862
const [status, setStatus] = useState('Get Metadata');
5963
return (
60-
<Transition appear show={isOpen} as={React.Fragment}>
61-
<Dialog as="div" className="relative z-10" onClose={onClose}>
62-
<Transition.Child
63-
as={React.Fragment}
64-
enter="ease-out duration-300"
65-
enterFrom="opacity-0"
66-
enterTo="opacity-100"
67-
leave="ease-in duration-200"
68-
leaveFrom="opacity-100"
69-
leaveTo="opacity-0"
70-
>
71-
<div className="fixed inset-0 bg-black/25" />
72-
</Transition.Child>
73-
74-
<div className="fixed inset-0 overflow-y-auto">
75-
<div className="flex min-h-full items-center justify-center p-4 text-center">
76-
<Transition.Child
77-
as={React.Fragment}
78-
enter="ease-out duration-300"
79-
enterFrom="opacity-0 scale-95"
80-
enterTo="opacity-100 scale-100"
81-
leave="ease-in duration-200"
82-
leaveFrom="opacity-100 scale-100"
83-
leaveTo="opacity-0 scale-95"
84-
>
85-
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-black text-white p-6 text-left align-middle shadow-xl transition-all">
86-
<Dialog.Title as="h3" className="text-lg font-medium leading-6">
87-
Add Problem
88-
</Dialog.Title>
89-
<div className="mt-2 relative rounded-md shadow-sm">
90-
<input
91-
type="text"
92-
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-700"
93-
placeholder="Enter Problem URL"
94-
onChange={e => console.log(e.target.value)}
95-
ref={linkRef}
96-
/>
97-
</div>
64+
<Modal {...props}>
65+
<Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-black text-white p-6 text-left align-middle shadow-xl transition-all">
66+
<Dialog.Title as="h3" className="text-lg font-medium leading-6">
67+
Add Problem
68+
</Dialog.Title>
69+
<div className="mt-2 relative rounded-md shadow-sm">
70+
<input
71+
type="text"
72+
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-700"
73+
placeholder="Enter Problem URL"
74+
onChange={e => console.log(e.target.value)}
75+
ref={linkRef}
76+
/>
77+
</div>
9878

99-
<div className="mt-4">
100-
<button
101-
className="btn"
102-
onClick={() =>
103-
linkRef.current &&
104-
addProblem(linkRef.current.value, setMetadata, setStatus)
105-
}
106-
>
107-
{status}
108-
</button>
109-
</div>
110-
<div className="mt-4 relative">
111-
<pre className="bg-gray-900 p-4 rounded-md text-white text-xs whitespace-pre-wrap">
112-
{metadata}
113-
</pre>
114-
<CopyButton
115-
className="btn absolute top-2 right-2"
116-
onClick={() => {
117-
navigator.clipboard.writeText(metadata);
118-
}}
119-
/>
120-
</div>
121-
</Dialog.Panel>
122-
</Transition.Child>
123-
</div>
79+
<div className="mt-4">
80+
<button
81+
className="btn"
82+
onClick={() =>
83+
linkRef.current &&
84+
addProblem(linkRef.current.value, setMetadata, setStatus)
85+
}
86+
>
87+
{status}
88+
</button>
89+
</div>
90+
<div className="mt-4 relative">
91+
<pre className="bg-gray-900 p-4 rounded-md text-white text-sm whitespace-pre-wrap">
92+
{metadata}
93+
</pre>
94+
<CopyButton
95+
className="btn absolute top-2 right-2"
96+
onClick={() => {
97+
navigator.clipboard.writeText(metadata);
98+
}}
99+
/>
124100
</div>
125-
</Dialog>
126-
</Transition>
101+
</Dialog.Panel>
102+
</Modal>
127103
);
128104
}

‎src/components/Modal.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Dialog, Transition } from '@headlessui/react';
2+
import React from 'react';
3+
export default function mModal({ children, isOpen, onClose }) {
4+
return (
5+
<Transition appear show={isOpen} as={React.Fragment}>
6+
<Dialog as="div" className="relative z-10" onClose={onClose}>
7+
<Transition.Child
8+
as={React.Fragment}
9+
enter="ease-out duration-300"
10+
enterFrom="opacity-0"
11+
enterTo="opacity-100"
12+
leave="ease-in duration-200"
13+
leaveFrom="opacity-100"
14+
leaveTo="opacity-0"
15+
>
16+
<div className="fixed inset-0 bg-black/25" />
17+
</Transition.Child>
18+
19+
<div className="fixed inset-0 overflow-y-auto">
20+
<div className="flex min-h-full items-center justify-center p-4 text-center">
21+
<Transition.Child
22+
as={React.Fragment}
23+
enter="ease-out duration-300"
24+
enterFrom="opacity-0 scale-95"
25+
enterTo="opacity-100 scale-100"
26+
leave="ease-in duration-200"
27+
leaveFrom="opacity-100 scale-100"
28+
leaveTo="opacity-0 scale-95"
29+
>
30+
{children}
31+
</Transition.Child>
32+
</div>
33+
</div>
34+
</Dialog>
35+
</Transition>
36+
);
37+
}

0 commit comments

Comments
 (0)