USRBG: improve settings ui
This commit is contained in:
parent
6afcce39dd
commit
78a2add1a5
2 changed files with 19 additions and 2 deletions
|
|
@ -12,6 +12,7 @@ import type { Button as DiscordButton } from "@vencord/discord-types";
|
|||
import type { ComponentPropsWithRef } from "react";
|
||||
|
||||
import { OpenExternalIcon } from "./Icons";
|
||||
import { Link } from "./Link";
|
||||
|
||||
const btnCls = classNameFactory("vc-btn-");
|
||||
const textBtnCls = classNameFactory("vc-text-btn-");
|
||||
|
|
@ -25,6 +26,11 @@ export type ButtonProps = ComponentPropsWithRef<"button"> & {
|
|||
size?: ButtonSize;
|
||||
};
|
||||
|
||||
export type LinkButtonProps = ComponentPropsWithRef<"a"> & {
|
||||
size?: ButtonSize;
|
||||
variant?: ButtonVariant;
|
||||
};
|
||||
|
||||
export function Button({ variant = "primary", size = "medium", children, className, ...restProps }: ButtonProps) {
|
||||
return (
|
||||
<button data-mana-component="button" className={classes(btnCls("base", variant, size), className)} {...restProps}>
|
||||
|
|
@ -34,6 +40,15 @@ export function Button({ variant = "primary", size = "medium", children, classNa
|
|||
);
|
||||
}
|
||||
|
||||
export function LinkButton({ variant = "link", size = "medium", className, children, ...restProps }: LinkButtonProps) {
|
||||
return (
|
||||
<Link data-mana-component="button" className={classes(btnCls("base", variant, size), className)} {...restProps}>
|
||||
{children}
|
||||
<OpenExternalIcon className={btnCls("link-icon")} />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export type TextButtonVariant = "primary" | "secondary" | "danger" | "link";
|
||||
|
||||
export type TextButtonProps = ComponentPropsWithRef<"button"> & {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
*/
|
||||
|
||||
import { definePluginSettings } from "@api/Settings";
|
||||
import { Link } from "@components/Link";
|
||||
import { LinkButton } from "@components/Button";
|
||||
import { Devs } from "@utils/constants";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
|
||||
|
|
@ -77,7 +77,9 @@ export default definePlugin({
|
|||
|
||||
settingsAboutComponent: () => {
|
||||
return (
|
||||
<Link href="https://github.com/AutumnVN/usrbg#how-to-request-your-own-usrbg-banner">CLICK HERE TO GET YOUR OWN BANNER</Link>
|
||||
<LinkButton href="https://github.com/AutumnVN/usrbg#how-to-request-your-own-usrbg-banner" variant="primary">
|
||||
Get your own USRBG banner
|
||||
</LinkButton>
|
||||
);
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue