diff --git a/web/components/button.tsx b/web/components/button.tsx index 3b59581b..d050b81e 100644 --- a/web/components/button.tsx +++ b/web/components/button.tsx @@ -1,26 +1,37 @@ import { ReactNode } from 'react' import clsx from 'clsx' -export default function Button(props: { +export function Button(props: { + children: ReactNode className?: string onClick?: () => void - color: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray' - children?: ReactNode + size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' + color?: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray' type?: 'button' | 'reset' | 'submit' }) { const { + children, className, onClick, - children, + size = 'md', color = 'indigo', type = 'button', } = props + const sizeClasses = { + xs: 'px-2.5 py-1.5 text-sm', + sm: 'px-3 py-2 text-sm', + md: 'px-4 py-2 text-sm', + lg: 'px-4 py-2 text-base', + xl: 'px-6 py-3 text-base', + }[size] + return (