71 lines
2.1 KiB
TypeScript
71 lines
2.1 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 PrimaryButton: 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
|
|
)}
|
|
>
|
|
{/* Основной контейнер, */}
|
|
<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-lighter group-hover:ring-[1px] group-hover:ring-liquid-darkmain group-hover:ring-inset",
|
|
"px-[16px] py-[8px]",
|
|
"bg-liquid-darkmain",
|
|
disabled && "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]",
|
|
"group-hover:text-liquid-brightmain ",
|
|
disabled && "text-liquid-light"
|
|
)}
|
|
>
|
|
{children || text}
|
|
</div>
|
|
</div>
|
|
</label>
|
|
);
|
|
};
|