36 lines
1006 B
TypeScript
36 lines
1006 B
TypeScript
import { Button } from '@headlessui/react'
|
|
import type { CSSProperties, MouseEventHandler, ReactNode } from 'react'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
type TProperties = {
|
|
children: ReactNode
|
|
onClick: MouseEventHandler
|
|
disabled?: boolean
|
|
isActive?: boolean
|
|
className?: string
|
|
title: string
|
|
style?: CSSProperties
|
|
}
|
|
|
|
export const EditorButton = (properties: TProperties) => {
|
|
const { children, onClick, disabled, className, isActive, title, style } =
|
|
properties
|
|
|
|
return (
|
|
<Button
|
|
type="button"
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={twMerge(
|
|
'flex h-6 w-8 cursor-pointer items-center justify-center rounded-md p-2 text-black hover:bg-[#2E2F7C] hover:text-white active:bg-[#2E2F7C]/50 disabled:cursor-not-allowed disabled:bg-[#2E2F7C]/50 disabled:text-white disabled:opacity-50',
|
|
isActive ? 'bg-[#2E2F7C]/10' : '',
|
|
className,
|
|
)}
|
|
style={style}
|
|
title={title}
|
|
>
|
|
{children}
|
|
</Button>
|
|
)
|
|
}
|