Инициализация в новом репозитории

FRONT/DEV/src/components/UI/buttons/mainButton.tsx

@@ -0,0 +1,75 @@
+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>
+    );
+};