75 lines
No EOL
2.2 KiB
TypeScript
75 lines
No EOL
2.2 KiB
TypeScript
import styled from "styled-components";
|
||
import { useTheme } from "styled-components";
|
||
import { IconComponent } from "../../../const/buttons/icons";
|
||
|
||
const Button = styled.button.withConfig({
|
||
shouldForwardProp: (prop) => !['color', '$hoverсolor', 'size', '$iconpos'].includes(prop),
|
||
})<{ color: string; size?: string, $hoverсolor: string, $iconpos: string }>`
|
||
background-color: ${(props) => props.color};
|
||
border: none;
|
||
padding: ${(props) =>
|
||
props.size === "small"
|
||
? "10px 28px"
|
||
: props.size === "big"
|
||
? "10px 20px"
|
||
: "12px 20px"}; // По умолчанию
|
||
border-radius: 8px;
|
||
color: white;
|
||
font-size: ${(props) =>
|
||
props.size === "small"
|
||
? "14px"
|
||
: props.size === "big"
|
||
? "16px"
|
||
: "14px"}; // По умолчанию
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: ${(props) =>
|
||
props.$iconpos === 'right'
|
||
? 'row-reverse'
|
||
: 'row'};
|
||
gap: 10px;
|
||
transition: all .3s ease;
|
||
&:hover{
|
||
background-color: ${(props) => props.$hoverсolor};
|
||
}
|
||
`;
|
||
|
||
type Props = {
|
||
color?: string;
|
||
hoverColor?: string
|
||
size?: "small" | "big";
|
||
title: string
|
||
onClick?: () => void;
|
||
type?: "button" | "submit" | "reset" | undefined
|
||
icon?: string
|
||
iconPosition?: 'left' | 'right'
|
||
iconSize?: {
|
||
width: string,
|
||
height: string
|
||
}
|
||
style?: any
|
||
};
|
||
|
||
export const MainButton = ({ color, size, title, hoverColor, type, icon, iconPosition, iconSize, onClick, style }: Props) => {
|
||
const theme = useTheme();
|
||
const defaultColor: string = theme.accent;
|
||
const defaultHoverColor: string = theme.accentHover
|
||
|
||
|
||
return (
|
||
<Button
|
||
className="unselectable"
|
||
color={color || defaultColor} size={size}
|
||
$hoverсolor={hoverColor || defaultHoverColor}
|
||
onClick={onClick}
|
||
type={type}
|
||
$iconpos={iconPosition || 'left'}
|
||
style={style}
|
||
>
|
||
{icon && <IconComponent name={icon} width={iconSize?.width} height={iconSize?.height} setColor="white"/> }
|
||
{title}
|
||
</Button>
|
||
);
|
||
}; |