120 lines
3.4 KiB
JavaScript
120 lines
3.4 KiB
JavaScript
import React from "react"
|
|
import tw, { styled } from "twin.macro"
|
|
|
|
import { colors, colorsDisabled, colorsHover } from "./Colors"
|
|
|
|
const BtnCreator = function ({ children, type, ...props }) {
|
|
switch(type){
|
|
case "submit":
|
|
type = "submit";
|
|
break;
|
|
case "reset":
|
|
type = "reset";
|
|
break;
|
|
default:
|
|
type = "button";
|
|
break;
|
|
}
|
|
|
|
return <button type={type} {...props}>
|
|
{children}
|
|
</button>
|
|
|
|
}
|
|
|
|
const BtnBase = styled(BtnCreator)(({ type }) => [
|
|
tw`bg-secondary hover:bg-trinary disabled:bg-trinary m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150`,
|
|
colors[type], colorsHover[type], colorsDisabled[type]
|
|
])
|
|
|
|
/*
|
|
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:
|
|
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>
|
|
)
|
|
}
|
|
*/
|
|
|
|
const ButtonBig = tw(BtnBase)`px-6 py-4 rounded-2xl`
|
|
const ButtonBigAnim = tw(ButtonBig)`transition duration-500 ease-in-out transform hover:scale-110`
|
|
|
|
const Button = tw(BtnBase)`px-4 py-2 rounded-xl`
|
|
const ButtonSmall = tw(BtnBase)`px-3 py-1 rounded`
|
|
const ButtonRound = tw(BtnBase)`p-2 rounded-full`
|
|
const IconButton = tw(BtnBase)`p-2 rounded-full`
|
|
|
|
export { ButtonBig, ButtonBigAnim, ButtonSmall, ButtonRound, IconButton }
|
|
export default Button;
|
|
|
|
/*
|
|
export function ButtonBig(props) {
|
|
return (
|
|
<ButtonBase {...props} className={"px-6 py-4 rounded-2xl " + (props.className ?? "")}>
|
|
{props.children}
|
|
</ButtonBase>
|
|
)
|
|
}
|
|
export function ButtonBigAnim(props) {
|
|
return (
|
|
<ButtonBase {...props} className={"px-6 py-4 rounded-2xl transition duration-500 ease-in-out transform hover:scale-110 " + (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>
|
|
)
|
|
}
|
|
*/ |