recipe-app/frontend/src/components/basics/BasicButtonDefinitions.ts
2025-10-25 08:00:59 +02:00

39 lines
No EOL
1.1 KiB
TypeScript

import type {LucideIcon} from "lucide-react";
/**
* Basic definitions used by all Button types, such as Button.tsx and ButtonLink.tsx
*/
export type BasicButtonProps = {
/** Optional Lucide icon (e.g. Plus, X, Check) */
icon?: LucideIcon;
text?: string;
buttonType?: ButtonType;
/** Optional additional style */
className?: string;
}
export const basicButtonStyle = "px-4 py-2 shadow-md rounded-lg whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
/**
* Define button types here.
* Export as enum like class.
*/
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",
},
TransparentButton: {
textColor: "text-gray-600",
backgroundColor: "bg-transparent hover:bg-transparent",
},
} as const;
export type ButtonType = typeof ButtonType[keyof typeof ButtonType];