41 lines
No EOL
1.2 KiB
TypeScript
41 lines
No EOL
1.2 KiB
TypeScript
import SvgIcon, { Icon } from "./SvgIcon"
|
|
|
|
type ButtonProps = {
|
|
onClicked: () => void,
|
|
icon?: Icon,
|
|
text?: string,
|
|
buttonType : ButtonType
|
|
}
|
|
|
|
export const ButtonType = {
|
|
DarkButton: {
|
|
textColor: "text-white",
|
|
backgroundColor: "bg-gray-600 hover:bg-gray-800"
|
|
},
|
|
PrimaryButton: {
|
|
textColor: "text-gray-600",
|
|
backgroundColor: "bg-blue-300 hover:bg-blue-400"
|
|
},
|
|
DefaultButton: {
|
|
textColor: "text-gray-600",
|
|
backgroundColor: "bg-gray-300 hover:bg-gray-400"
|
|
}
|
|
} as const;
|
|
|
|
export type ButtonType = typeof ButtonType[keyof typeof ButtonType];
|
|
|
|
export default function Button ({onClicked, icon, text, buttonType = ButtonType.DefaultButton} : ButtonProps){
|
|
return(
|
|
<button
|
|
type="button"
|
|
className={`px-4 py-2 shadow-md rounded-lg whitespace-nowrap ${buttonType.backgroundColor} ${buttonType.textColor}`}
|
|
onClick={onClicked}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{/* Render icon only if defined */}
|
|
{icon && <SvgIcon icon={icon} color={buttonType.textColor} />}
|
|
{text}
|
|
</div>
|
|
</button>
|
|
)
|
|
} |