add: button components in dialog

packages/next/app/signup/SignUpForm.tsx

@@ -7,7 +7,7 @@ import { computeVdfInWorker } from "@/lib/vdf";
 import useSWR from "swr";
 import { ApiRequestError } from "@/lib/net";
 import { Portal } from "@/components/utils/Portal";
-import { Dialog, DialogHeadline, DialogSupportingText } from "@/components/ui/Dialog";
+import { Dialog, DialogButton, DialogButtonGroup, DialogHeadline, DialogSupportingText } from "@/components/ui/Dialog";
 import { FilledButton } from "@/components/ui/Buttons/FilledButton";
 
 interface CaptchaSessionResponse {
@@ -154,6 +154,9 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
 							<DialogSupportingText>
 								<p>Your operation frequency is too high. Please try again later. (RATE_LIMIT_EXCEED)</p>
 							</DialogSupportingText>
+							<DialogButtonGroup>
+								<DialogButton onClick={() => setShowDialog(false)}>Close</DialogButton>
+							</DialogButtonGroup>
 						</>
 					);
 				}}
@@ -166,9 +169,7 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
 				{!loading ? <span>注册</span> : <LoadingSpinner />}
 			</FilledButton>
 			<Portal>
-				<Dialog show={showDialog} onClose={() => setShowDialog(false)}>
+				<Dialog show={showDialog}>{dialogContent}</Dialog>
-					{dialogContent}
-				</Dialog>
 			</Portal>
 		</form>
 	);

packages/next/components/shell/Header.tsx

@@ -15,7 +15,6 @@ import { SearchIcon } from "@/components/icons/SearchIcon";
 import { InfoIcon } from "@/components/icons/InfoIcon";
 import { HomeIcon } from "@/components/icons/HomeIcon";
 import { TextButton } from "@/components/ui/Buttons/TextButton";
-import { useRouter } from "next/navigation";
 import Link from "next/link";
 
 export const HeaderDestop = () => {

packages/next/components/ui/Dialog.tsx

@@ -1,19 +1,22 @@
 import { motion, AnimatePresence } from "framer-motion";
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { TextButton } from "./Buttons/TextButton";
 
 interface DialogProps {
 	show: boolean;
-	onClose: () => void;
 	children?: React.ReactNode;
 }
 
-interface DialogHeadlineProps {
+interface OptionalChidrenProps {
 	children?: React.ReactNode;
 }
 
-interface DialogSupportingTextProps {
+type DialogHeadlineProps = OptionalChidrenProps;
-	children?: React.ReactNode;
+type DialogSupportingTextProps = OptionalChidrenProps;
+type DialogButtonGroupProps = OptionalChidrenProps;
+
+interface DialogButtonProps extends OptionalChidrenProps {
+	onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 export const DialogHeadline: React.FC<DialogHeadlineProps> = ({ children }: DialogHeadlineProps) => {
@@ -23,7 +26,16 @@ export const DialogHeadline: React.FC<DialogHeadlineProps> = ({ children }: Dial
 export const DialogSupportingText: React.FC<DialogSupportingTextProps> = ({ children }: DialogHeadlineProps) => {
 	return <div className="mt-4 text-sm leading-5 mb-6">{children}</div>;
 };
-export const Dialog: React.FC<DialogProps> = ({ show, onClose, children }: DialogProps) => {
+
+export const DialogButton: React.FC<DialogButtonProps> = ({ children, onClick }: DialogButtonProps) => {
+	return <TextButton onClick={onClick}>{children}</TextButton>;
+};
+
+export const DialogButtonGroup: React.FC<DialogButtonGroupProps> = ({ children }: DialogButtonGroupProps) => {
+	return <div className="flex justify-end gap-2">{children}</div>;
+};
+
+export const Dialog: React.FC<DialogProps> = ({ show, children }: DialogProps) => {
 	return (
 		<AnimatePresence>
 			{show && (
@@ -38,17 +50,13 @@ export const Dialog: React.FC<DialogProps> = ({ show, onClose, children }: Dialo
 					/>
 					<motion.div
 						className="fixed min-w-[17.5rem] sm:max-w-[35rem] h-auto z-50 bg-surface-container-high
-					    shadow-xl shadow-shadow/5 rounded-[1.75rem] p-6 dark:bg-dark-surface-container-high mx-2"
+					    shadow-2xl shadow-shadow/15 rounded-[1.75rem] p-6 dark:bg-dark-surface-container-high mx-2"
-						initial={{ opacity: 0.5, transform: "scale(0.9)" }}
+						initial={{ opacity: 0.5, transform: "scale(1.1)" }}
 						animate={{ opacity: 1, transform: "scale(1)" }}
 						exit={{ opacity: 0 }}
 						transition={{ ease: [0.31, 0.69, 0.3, 1.02], duration: 0.3 }}
 					>
 						{children}
-						<div className="flex justify-end gap-2">
-							<TextButton onClick={onClose}>Action 1</TextButton>
-							<TextButton onClick={onClose}>Action 2</TextButton>
-						</div>
 					</motion.div>
 				</div>
 			)}

packages/next/components/ui/NavigatinDrawer.tsx

@@ -41,7 +41,8 @@ export const NavigationDrawer = ({ show = false, onClose, children }: DrawerProp
 
 					{/* Drawer - Slide from left */}
 					<motion.div
-						className="fixed top-0 left-0 h-full bg-surface-container-low dark:bg-dark-surface-container-low z-50"
+						className="fixed top-0 left-0 h-full bg-surface-container-low dark:bg-dark-surface-container-low
+					        z-50 rounded-r-2xl"
 						style={{ width: "min(22.5rem, 70vw)" }}
 						initial={{ x: -500, opacity: 0 }}
 						animate={{ x: 0, opacity: 1 }}