2023-05-13 14:17:47 +02:00
|
|
|
export const ChoiceButton = ({
|
|
|
|
|
title = '',
|
|
|
|
|
onClick,
|
|
|
|
|
children,
|
|
|
|
|
icon = null,
|
|
|
|
|
color = 'secondary',
|
|
|
|
|
active = false,
|
2023-07-09 18:50:13 +02:00
|
|
|
noMargin = false,
|
2023-05-13 14:17:47 +02:00
|
|
|
}) => (
|
|
|
|
|
<button
|
|
|
|
|
onClick={onClick}
|
|
|
|
|
className={`
|
2023-07-09 18:50:13 +02:00
|
|
|
flex flex-col flex-nowrap items-start justify-start gap-2 pt-2 pb-4 h-auto w-full ${
|
|
|
|
|
noMargin ? '' : 'mt-3'
|
|
|
|
|
}
|
2023-05-13 14:17:47 +02:00
|
|
|
btn btn-${color} btn-ghost border border-${color}
|
|
|
|
|
hover:bg-opacity-20 hover:bg-${color} hover:border hover:border-${color}
|
|
|
|
|
${active ? 'bg-' + color + ' bg-opacity-20 border border-' + color : ''}
|
|
|
|
|
`}
|
|
|
|
|
>
|
|
|
|
|
<h5 className="flex flex-row items-center justify-between w-full">
|
|
|
|
|
<span>{title}</span>
|
|
|
|
|
{icon}
|
|
|
|
|
</h5>
|
|
|
|
|
<div className={`normal-case text-base font-medium text-base-content text-left`}>
|
|
|
|
|
{children}
|
|
|
|
|
</div>
|
|
|
|
|
</button>
|
|
|
|
|
)
|
