alikia2x/cvsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: button components in dialog

Browse Source
This commit is contained in:
alikia2x (寒寒) 2025-05-28 23:01:43 +08:00
parent 557a013b42
commit 58b4e2613c
Signed by: alikia2x
GPG Key ID: 56209E0CCD8420C6
4 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/next/app/signup/SignUpForm.tsx
View File

@ -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)}>
{dialogContent}
</Dialog>
<Dialog show={showDialog}>{dialogContent}</Dialog>
</Portal>
</form>
);

1
packages/next/components/shell/Header.tsx
View File

@ -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 = () => {

32
packages/next/components/ui/Dialog.tsx
View File

@ -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 {
children?: React.ReactNode;
type DialogHeadlineProps = OptionalChidrenProps;
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"
initial={{ opacity: 0.5, transform: "scale(0.9)" }}
shadow-2xl shadow-shadow/15 rounded-[1.75rem] p-6 dark:bg-dark-surface-container-high mx-2"
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>
)}

3
packages/next/components/ui/NavigatinDrawer.tsx
View File

@ -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 }}