The weeb for the next gen discord boat - Wamellow wamellow.com
bot discord
3
fork

Configure Feed

Select the types of activity you want to include in your feed.

modify modal to match shadcn/ui

Luna 2e5a1569 a1805fc9

+22 -32
+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 }