72 lines
2.1 KiB
JavaScript
72 lines
2.1 KiB
JavaScript
import React from 'react'
|
|
|
|
function ButtonBase(props) {
|
|
let color = "bg-secondary hover:bg-trinary"
|
|
switch (props.type) {
|
|
case "warning":
|
|
color = "bg-accent4 hover:bg-accent4-dark"
|
|
break;
|
|
case "danger":
|
|
color = "bg-red-700 hover:bg-red-800"
|
|
break;
|
|
case "accent":
|
|
color = "bg-accent hover:bg-accent-dark"
|
|
break;
|
|
case "accent2":
|
|
color = "bg-accent2 hover:bg-accent2-dark"
|
|
break;
|
|
case "accent3":
|
|
color = "bg-accent3 hover:bg-accent3-dark"
|
|
break;
|
|
case "accent5":
|
|
color = "bg-accent5 hover:bg-accent5-dark"
|
|
break;
|
|
default:
|
|
color = ""
|
|
break;
|
|
}
|
|
return (
|
|
<button {...props}
|
|
className={color + " m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150 " + (props.className ?? "")}
|
|
type="button"
|
|
>
|
|
{props.children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export function ButtonBig(props) {
|
|
return (
|
|
<ButtonBase {...props} className={"px-6 py-4 rounded-2xl " + (props.className ?? "")}>
|
|
{props.children}
|
|
</ButtonBase>
|
|
)
|
|
}
|
|
export default function Button(props) {
|
|
return (
|
|
<ButtonBase {...props} className={"px-4 py-2 rounded-xl " + (props.className ?? "")}>
|
|
{props.children}
|
|
</ButtonBase>
|
|
)
|
|
}
|
|
export function ButtonSmall(props) {
|
|
return (
|
|
<ButtonBase {...props} className={"px-3 py-1 rounded " + (props.className ?? "")}>
|
|
{props.children}
|
|
</ButtonBase>
|
|
)
|
|
}
|
|
export function ButtonRound(props) {
|
|
return (
|
|
<ButtonBase {...props} className={"p-2 rounded-full " + (props.className ?? "")}>
|
|
{props.children}
|
|
</ButtonBase>
|
|
)
|
|
}
|
|
export function IconButton({icon,...props}){
|
|
return(
|
|
<a {...props} className={"cursor-pointer hover:text-primary text-secondary py-1 px-3 " + (props.className ?? "")}>
|
|
<i className={"fi fi-"+icon}></i>
|
|
</a>
|
|
)
|
|
} |