RaidBuilder/RaidBuilderWeb
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added buttons

Browse Source
This commit is contained in:
Mattrixwv
2025-02-26 21:10:29 -05:00
parent d1b0a499a8
commit 1499f4055f
11 changed files with 633 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/button/Button.tsx Normal file
View File

@@ -0,0 +1,68 @@
import clsx from "clsx";
export type ButtonRounding = "none" | "sm" | "md" | "lg" | "full";
export type ButtonShape = "vertical" | "horizontal" | "square";
export type ButtonSizeType = "xsm" | "sm" | "md" | "lg" | "xl";
export type ButtonVariant = "solid" | "outline" | "ghost" | "outline-ghost" | "icon";
export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>{
rounding?: ButtonRounding;
shape?: ButtonShape;
size?: ButtonSizeType;
variant?: ButtonVariant;
}
export default function Button(props: ButtonProps){
const {
rounding = "lg",
shape = "vertical",
size = "md"
} = props;
const buttonProps = {...props};
delete buttonProps.rounding;
delete buttonProps.shape;
delete buttonProps.size;
delete buttonProps.variant;
return (
<button
{...props}
className={clsx(
props.className,
//Rounding
{
"rounded-none": rounding === "none",
"rounded-sm": rounding === "sm",
"rounded-md": rounding === "md",
"rounded-lg": rounding === "lg",
"rounded-full": rounding === "full"
},
//Shape & Size
{
//Square
"p-0": size === "xsm" && shape === "square",
"p-1": size === "sm" && shape === "square",
"p-2": size === "md" && shape === "square",
"p-3": size === "lg" && shape === "square",
"p-4": size === "xl" && shape === "square",
//Horizontal
"px-1 py-0": size === "xsm" && shape === "horizontal",
"px-2 py-1": size === "sm" && shape === "horizontal",
"px-4 py-2": size === "md" && shape === "horizontal",
"px-6 py-3": size === "lg" && shape === "horizontal",
"px-8 py-4": size === "xl" && shape === "horizontal",
//Vertical
"px-0 py-1": size === "xsm" && shape === "vertical",
"px-1 py-2": size === "sm" && shape === "vertical",
"px-2 py-4": size === "md" && shape === "vertical",
"px-3 py-6": size === "lg" && shape === "vertical",
"px-4 py-8": size === "xl" && shape === "vertical",
}
)}
/>
);
}

39
src/components/button/DangerButton.tsx Normal file
View File

@@ -0,0 +1,39 @@
import clsx from "clsx";
import Button, { ButtonProps } from "./Button";
export default function DangerButton(props: ButtonProps){
const {
variant = "solid"
} = props;
return (
<Button
{...props}
className={clsx(
props.className,
//Background
{
"bg-transparent": variant === "outline" || variant === "icon",
"bg-red-600 hover:bg-red-700 active:bg-red-800": variant === "solid",
"bg-transparent hover:bg-red-600 active:bg-red-700": variant === "ghost" || variant === "outline-ghost"
},
//Text
{
"text-white": variant === "solid",
"text-red-600 hover:text-red-700 active:text-red-800": variant === "outline" || variant === "icon",
"text-red-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost"
},
//Outline
{
"outline-none": variant === "ghost" || variant === "icon",
"outline outline-red-600 hover:outline-red-700 active:outline-red-800": variant === "solid" || variant === "outline",
"outline hover:outline-red-600 active:outline-red-700": variant === "outline-ghost"
}
)}
>
{props.children}
</Button>
);
}

33
src/components/button/PrimaryButton.tsx
View File

@@ -1,18 +1,39 @@
import clsx from "clsx";
import { ComponentProps } from "react";
import Button, { ButtonProps } from "./Button";
export default function PrimaryButton(props: ButtonProps){
const {
variant = "solid"
} = props;
export default function PrimaryButton(props: ComponentProps<"button">){
return (
<button
<Button
{...props}
className={clsx(
props.className,
"rounded-lg py-2 px-4",
"bg-blue-500 dark:bg-blue-600 text-white"
//Background
{
"bg-transparent": variant === "outline" || variant === "icon",
"bg-blue-600 hover:bg-blue-700 active:bg-blue-800": variant === "solid",
"bg-transparent hover:bg-blue-600 active:bg-blue-700": variant === "ghost" || variant === "outline-ghost"
},
//Text
{
"text-white": variant === "solid",
"text-blue-600 hover:text-blue-700 active:text-blue-800": variant === "outline" || variant === "icon",
"text-blue-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost"
},
//Outline
{
"outline-none": variant === "ghost" || variant === "icon",
"outline outline-blue-600 hover:outline-blue-700 active:outline-blue-800": variant === "solid" || variant === "outline",
"outline hover:outline-blue-600 active:outline-blue-700": variant === "outline-ghost"
}
)}
>
{props.children}
</button>
</Button>
);
}

39
src/components/button/SecondaryButton.tsx Normal file
View File

@@ -0,0 +1,39 @@
import clsx from "clsx";
import Button, { ButtonProps } from "./Button";
export default function SecondaryButton(props: ButtonProps){
const {
variant = "solid"
} = props;
return (
<Button
{...props}
className={clsx(
props.className,
//Background
{
"bg-transparent": variant === "outline" || variant === "icon",
"bg-neutral-500 hover:bg-neutral-600 active:bg-neutral-700": variant === "solid",
"bg-transparent hover:bg-neutral-500 active:bg-neutral-600": variant === "ghost" || variant === "outline-ghost"
},
//Text
{
"text-white": variant === "solid",
"text-neutral-500 hover:text-neutral-600 active:text-neutral-700": variant === "outline" || variant === "icon",
"text-neutral-500 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost"
},
//Outline
{
"outline-none": variant === "ghost" || variant === "icon",
"outline outline-neutral-500 hover:outline-neutral-600 active:outline-neutral-700": variant === "solid" || variant === "outline",
"outline hover:outline-neutral-500 active:outline-neutral-600": variant === "outline-ghost"
}
)}
>
{props.children}
</Button>
);
}

39
src/components/button/SuccessButton.tsx Normal file
View File

@@ -0,0 +1,39 @@
import clsx from "clsx";
import Button, { ButtonProps } from "./Button";
export default function SuccessButton(props: ButtonProps){
const {
variant = "solid"
} = props;
return (
<Button
{...props}
className={clsx(
props.className,
//Background
{
"bg-transparent": variant === "outline" || variant === "icon",
"bg-green-600 hover:bg-green-700 active:bg-green-800": variant === "solid",
"bg-transparent hover:bg-green-600 active:bg-green-700": variant === "ghost" || variant === "outline-ghost"
},
//Text
{
"text-white": variant === "solid",
"text-green-600 hover:text-green-700 active:text-green-800": variant === "outline" || variant === "icon",
"text-green-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost"
},
//Outline
{
"outline-none": variant === "ghost" || variant === "icon",
"outline outline-green-600 hover:outline-green-700 active:outline-green-800": variant === "solid" || variant === "outline",
"outline hover:outline-green-600 active:outline-green-700": variant === "outline-ghost"
}
)}
>
{props.children}
</Button>
);
}

39
src/components/button/TertiaryButton.tsx Normal file
View File

@@ -0,0 +1,39 @@
import clsx from "clsx";
import Button, { ButtonProps } from "./Button";
export default function TertiaryButton(props: ButtonProps){
const {
variant = "solid"
} = props;
return (
<Button
{...props}
className={clsx(
props.className,
//Background
{
"bg-transparent": variant === "outline" || variant === "icon",
"bg-purple-600 hover:bg-purple-700 active:bg-purple-800": variant === "solid",
"bg-transparent hover:bg-purple-600 active:bg-purple-700": variant === "ghost" || variant === "outline-ghost"
},
//Text
{
"text-white": variant === "solid",
"text-purple-600 hover:text-purple-700 active:text-purple-800": variant === "outline" || variant === "icon",
"text-purple-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost"
},
//Outline
{
"outline-none": variant === "ghost" || variant === "icon",
"outline outline-purple-600 hover:outline-purple-700 active:outline-purple-800": variant === "solid" || variant === "outline",
"outline hover:outline-purple-600 active:outline-purple-700": variant === "outline-ghost"
}
)}
>
{props.children}
</Button>
);
}

39
src/components/button/WarningButton.tsx Normal file
View File

@@ -0,0 +1,39 @@
import clsx from "clsx";
import Button, { ButtonProps } from "./Button";
export default function WarningButton(props: ButtonProps){
const {
variant = "solid"
} = props;
return (
<Button
{...props}
className={clsx(
props.className,
//Background
{
"bg-transparent": variant === "outline" || variant === "icon",
"bg-yellow-400 hover:bg-yellow-500 active:bg-yellow-600": variant === "solid",
"bg-transparent hover:bg-yellow-400 active:bg-yellow-500": variant === "ghost" || variant === "outline-ghost"
},
//Text
{
"text-black": variant === "solid",
"text-yellow-400 hover:text-yellow-500 active:text-yellow-600": variant === "outline" || variant === "icon",
"text-yellow-400 hover:text-black active:text-black": variant === "ghost" || variant === "outline-ghost"
},
//Outline
{
"outline-none": variant === "ghost" || variant === "icon",
"outline outline-yellow-400 hover:outline-yellow-500 active:outline-yellow-600": variant === "solid" || variant === "outline",
"outline hover:outline-yellow-400 active:outline-yellow-500": variant === "outline-ghost"
}
)}
>
{props.children}
</Button>
);
}

4
src/components/nav/PublicNavLinks.tsx
View File

@@ -6,6 +6,10 @@ const publicLinks = [
{
name: "Home",
path: "/"
},
{
name: "Test",
path: "/test"
}
];