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

Added message components

Browse Source
This commit is contained in:
Mattrixwv
2025-03-02 11:42:37 -05:00
parent 843970e229
commit 6f3fe1798b
16 changed files with 334 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

16
src/components/message/DangerMessage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import clsx from "clsx";
import { HTMLProps } from "react";
import Message from "./Message";
export default function DangerMessage(props: HTMLProps<HTMLDivElement>){
return (
<Message
{...props}
className={clsx(
"bg-red-100 text-red-500",
props.className
)}
/>
);
}

16
src/components/message/DarkMessage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import clsx from "clsx";
import { HTMLProps } from "react";
import Message from "./Message";
export default function DarkMessage(props: HTMLProps<HTMLDivElement>){
return (
<Message
{...props}
className={clsx(
"bg-black text-white",
props.className
)}
/>
);
}

16
src/components/message/InfoMessage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import clsx from "clsx";
import { HTMLProps } from "react";
import Message from "./Message";
export default function InfoMessage(props: HTMLProps<HTMLDivElement>){
return (
<Message
{...props}
className={clsx(
"bg-cyan-100 text-sky-500",
props.className
)}
/>
);
}

16
src/components/message/LightMessage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import clsx from "clsx";
import { HTMLProps } from "react";
import Message from "./Message";
export default function LightMessage(props: HTMLProps<HTMLDivElement>){
return (
<Message
{...props}
className={clsx(
"bg-white text-black",
props.className
)}
/>
);
}

15
src/components/message/Message.tsx Normal file
View File

@@ -0,0 +1,15 @@
import clsx from "clsx";
import { HTMLProps } from "react";
export default function Message(props: HTMLProps<HTMLDivElement>){
return (
<div
{...props}
className={clsx(
"px-2 py-1 outline rounded-lg",
props.className
)}
/>
);
}

16
src/components/message/MoltenMessage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import clsx from "clsx";
import { HTMLProps } from "react";
import Message from "./Message";
export default function MoltenMessage(props: HTMLProps<HTMLDivElement>){
return (
<Message
{...props}
className={clsx(
"bg-orange-100 text-orange-500",
props.className
)}
/>
);
}

16
src/components/message/PrimaryMessage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import clsx from "clsx";
import { HTMLProps } from "react";
import Message from "./Message";
export default function PrimaryMessage(props: HTMLProps<HTMLDivElement>){
return (
<Message
{...props}
className={clsx(
"bg-blue-200 text-blue-500",
props.className
)}
/>
);
}

16
src/components/message/SecondaryMessage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import clsx from "clsx";
import { HTMLProps } from "react";
import Message from "./Message";
export default function SecondaryMessage(props: HTMLProps<HTMLDivElement>){
return (
<Message
{...props}
className={clsx(
"bg-neutral-200 text-neutral-600",
props.className
)}
/>
);
}

16
src/components/message/SuccessMessage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import clsx from "clsx";
import { HTMLProps } from "react";
import Message from "./Message";
export default function SuccessMessage(props: HTMLProps<HTMLDivElement>){
return (
<Message
{...props}
className={clsx(
"bg-green-200 text-green-600",
props.className
)}
/>
);
}

16
src/components/message/TertiaryMessage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import clsx from "clsx";
import { HTMLProps } from "react";
import Message from "./Message";
export default function TertiaryMessage(props: HTMLProps<HTMLDivElement>){
return (
<Message
{...props}
className={clsx(
"bg-purple-200 text-purple-500",
props.className
)}
/>
);
}

16
src/components/message/WarningMessage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import clsx from "clsx";
import { HTMLProps } from "react";
import Message from "./Message";
export default function WarningMessage(props: HTMLProps<HTMLDivElement>){
return (
<Message
{...props}
className={clsx(
"bg-yellow-100 text-yellow-600",
props.className
)}
/>
);
}