USRBG: improve settings ui

This commit is contained in:
Vendicated 2025-11-18 01:56:23 +01:00
parent 6afcce39dd
commit 78a2add1a5
No known key found for this signature in database
GPG key ID: D66986BAF75ECF18
2 changed files with 19 additions and 2 deletions

View file

@ -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"> & {

View file

@ -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>
);
},