74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '../../lib/cn';
|
|
|
|
interface ButtonProps {
|
|
disabled?: boolean;
|
|
text?: string;
|
|
className?: string;
|
|
onClick: () => void;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const SecondaryButton: React.FC<ButtonProps> = ({
|
|
disabled = false,
|
|
text = '',
|
|
className,
|
|
onClick,
|
|
children,
|
|
}) => {
|
|
return (
|
|
<label
|
|
className={cn(
|
|
'grid relative cursor-pointer select-none group w-fit box-border',
|
|
disabled && 'pointer-events-none',
|
|
className,
|
|
)}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
{/* Основной контейнер, */}
|
|
<div
|
|
className={cn(
|
|
'group-active:scale-90 flex items-center justify-center box-border z-10 relative transition-all duration-300',
|
|
'rounded-[10px]',
|
|
'group-hover:bg-liquid-background',
|
|
'px-[16px] py-[8px]',
|
|
'bg-liquid-lighter',
|
|
)}
|
|
>
|
|
{/* Скрытый button */}
|
|
<button
|
|
className={cn(
|
|
'absolute opacity-0 -z-10 h-0 w-0',
|
|
'[&:focus-visible+*]:outline-liquid-brightmain',
|
|
)}
|
|
disabled={disabled}
|
|
onClick={() => {
|
|
onClick();
|
|
}}
|
|
/>
|
|
|
|
{/* Граница при выделении через tab */}
|
|
<div
|
|
className={cn(
|
|
'absolute outline-offset-[2.5px] border-[2px] border-transparent outline-[2.5px] outline outline-transparent transition-all duration-300 text-transparent box-border text-[18px] font-bold p-0 ,m-0 leading-[23px]',
|
|
'rounded-[10px]',
|
|
'px-[16px] py-[8px]',
|
|
)}
|
|
>
|
|
{children || text}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
'transition-all duration-300 text-liquid-white text-[18px] font-bold p-0 m-0 leading-[23px]',
|
|
disabled && 'text-liquid-light',
|
|
)}
|
|
>
|
|
{children || text}
|
|
</div>
|
|
</div>
|
|
</label>
|
|
);
|
|
};
|