75 lines
2.2 KiB
TypeScript
75 lines
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"
|
|||
|
|
? "4px 8px"
|
|||
|
|
: props.size === "big"
|
|||
|
|
? "10px 20px"
|
|||
|
|
: "6px 10px"}; // По умолчанию
|
|||
|
|
border-radius: 8px;
|
|||
|
|
color: white;
|
|||
|
|
font-size: ${(props) =>
|
|||
|
|
props.size === "small"
|
|||
|
|
? "12px"
|
|||
|
|
: 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;
|
|||
|
|
|
|||
|
|
&: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>
|
|||
|
|
);
|
|||
|
|
};
|