import { ClassNameProp, resolveClassName } from '@unwind/class-name';
import { memo, PropsWithChildren } from "react";
const buttonClassName = [
'bg-gray-50 hover:bg-white active:bg-gray-200',
'border border-gray-300 rounded',
'py-2 px-4',
]
type ButtonProps = PropsWithChildren<{
className?: ClassNameProp<typeof buttonClassName>
}>
const Button = memo<ButtonProps>(({ children, className }) => (
<button className={resolveClassName(null, buttonClassName, className)}>
{children}
</button>
))
function App() {
return (
<Button
className={(state, provided) => [
...provided.filter(
selector => !selector.startsWith('border')
),
'font-bold',
]}
>
Click me!
</Button>
)
}