LiquidCode/LiquidCode_Frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-11-04 15:04:59 +03:00
parent 3cd8e14288
commit 4972836164
60 changed files with 3604 additions and 2916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/button/ReverseButton.tsx
View File

@@ -1,70 +1,72 @@
import React from "react";
import { cn } from "../../lib/cn";
import React from 'react';
import { cn } from '../../lib/cn';
interface ButtonProps {
disabled?: boolean;
text?: string;
className?: string;
onClick: () => void;
children?: React.ReactNode;
disabled?: boolean;
text?: string;
className?: string;
onClick: () => void;
children?: React.ReactNode;
}
export const ReverseButton: React.FC<ButtonProps> = ({
disabled = false,
text = "",
className,
onClick,
children,
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-darkmain ",
"px-[16px] py-[8px]",
"bg-liquid-lighter ring-[1px] ring-liquid-darkmain ring-inset",
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() }}
/>
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-darkmain ',
'px-[16px] py-[8px]',
'bg-liquid-lighter ring-[1px] ring-liquid-darkmain ring-inset',
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-brightmain text-[18px] font-bold p-0 m-0 leading-[23px]",
"group-hover:text-liquid-white ",
disabled && "text-liquid-light"
)}
>
{children || text}
</div>
</div>
</label>
);
{/* Граница при выделении через 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-brightmain text-[18px] font-bold p-0 m-0 leading-[23px]',
'group-hover:text-liquid-white ',
disabled && 'text-liquid-light',
)}
>
{children || text}
</div>
</div>
</label>
);
};