The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
modify modal to match shadcn/ui
+22
-32
+22
-32
components/modal.tsx
+22
-32
components/modal.tsx
···
1
1
"use client";
2
2
3
-
import { Button, Progress } from "@nextui-org/react";
3
+
import { Progress } from "@nextui-org/react";
4
4
import { AnimatePresence, motion, MotionConfig } from "framer-motion";
5
5
import { useEffect, useState } from "react";
6
6
import { HiX } from "react-icons/hi";
···
10
10
11
11
import { ClickOutside } from "./click-outside";
12
12
import Notice, { NoticeType } from "./notice";
13
+
import { Separator } from "@radix-ui/react-separator";
14
+
import { Button } from "./ui/button";
13
15
14
16
enum State {
15
17
Idle = 0,
···
18
20
19
21
interface Props<T> {
20
22
className?: string;
21
-
variant?: "default" | "danger";
23
+
variant?:"secondary" | "default" | "destructive";
22
24
23
25
title: string;
24
26
children: React.ReactNode;
···
36
38
37
39
export default function Modal<T>({
38
40
className,
39
-
variant,
41
+
variant = "secondary",
40
42
title,
41
43
children,
42
44
footer,
···
106
108
<Button
107
109
onClick={() => onClose()}
108
110
className="ml-auto"
109
-
size="sm"
110
-
isIconOnly
111
+
size="icon"
111
112
>
112
-
<span>
113
-
<HiX />
114
-
</span>
113
+
<HiX />
115
114
</Button>
116
115
</div>
117
116
···
119
118
size="sm"
120
119
isIndeterminate={state === State.Loading}
121
120
aria-label="Loading..."
122
-
className="mt-2 mb-3 h-0.5"
121
+
className="mt-3 mb-4 h-0.5"
123
122
classNames={{
124
123
track: "dark:bg-wamellow-light bg-wamellow-100-light",
125
124
indicator: "bg-violet-500"
···
129
128
</>);
130
129
}
131
130
132
-
function Footer({
133
-
children
134
-
}: {
135
-
children: React.ReactNode
136
-
}) {
137
-
return (<div className="flex items-center w-full gap-4 p-4">
138
-
{children}
131
+
function Footer() {
132
+
return (<div className="flex items-center w-full gap-6 p-4">
133
+
{footer}
139
134
140
135
{onSubmit &&
141
136
<button
···
151
146
}
152
147
153
148
<Button
154
-
color={variant || "secondary"}
149
+
variant={variant}
155
150
onClick={() => submit()}
156
151
className={cn(!onSubmit && "ml-auto")}
157
-
isLoading={state === State.Loading}
158
-
isDisabled={isDisabled}
152
+
disabled={isDisabled}
159
153
>
160
154
{buttonName}
161
155
</Button>
162
156
163
-
<ClickOutside onClose={onClose} />
157
+
{isOpen && <ClickOutside onClose={onClose} />}
164
158
</div>);
165
159
}
166
160
167
-
return (<MotionConfig transition={{ type: "spring", bounce: 0.4, duration: 0.7 }}>
161
+
return (<MotionConfig transition={{ type: "spring", bounce: 0.4, duration: 1 }}>
168
162
<AnimatePresence initial={false}>
169
163
170
164
{isOpen &&
···
173
167
animate={isOpen ? "open" : "closed"}
174
168
exit="closed"
175
169
variants={{ closed: { opacity: 0 }, open: { opacity: 1 } }}
176
-
className="fixed top-0 left-0 h-screen w-full inset-0 backdrop-blur backdrop-brightness-50 flex items-center justify-center z-50 cursor-default"
170
+
className="fixed top-0 left-0 h-screen w-full inset-0 backdrop-brightness-[25%] backdrop-blur flex items-center justify-center z-50 cursor-default"
177
171
style={{ maxHeight: "100dvh" }}
178
172
>
179
173
<motion.div
···
193
187
}
194
188
}}
195
189
className="
196
-
md:relative fixed bottom-0 min-h-[333px] md:min-h-fit m-2 wamellow-modal
197
-
w-full md:w-[480px] bg-[#06040b] rounded-xl shadow-md
198
-
max-sm:[--y-closed:16px] [--opacity-closed:0%] sm:[--scale-closed:90%]
190
+
md:relative fixed bottom-0 min-h-[333px] md:min-h-fit mb-2 wamellow-modal
191
+
w-[97%] md:w-[480px] bg-popover rounded-xl shadow-md
192
+
max-sm:[--y-closed:28px] [--opacity-closed:0%] sm:[--scale-closed:90%]
199
193
max-sm:[--y-open:0px] [--opacity-open:100%] sm:[--scale-open:100%]
200
194
"
201
195
>
202
196
203
-
<div className="p-4 pb-0 mb-16 md:mb-0">
197
+
<div className="p-4 pb-0">
204
198
<Header />
205
199
206
200
<div
···
218
212
219
213
{children}
220
214
</div>
221
-
222
215
</div>
223
216
224
-
<div className="md:relative absolute bottom-0 left-0 w-full dark:bg-wamellow bg-wamellow-100 rounded-bl-md rounded-br-md backdrop-blur-md">
225
-
<Footer>
226
-
{footer}
227
-
</Footer>
228
-
</div>
217
+
<Separator className="bg-muted h-[1px]" />
229
218
219
+
<Footer />
230
220
</motion.div>
231
221
</motion.div>
232
222
}