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

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>
+    );
+};

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

@@ -0,0 +1,45 @@
+import { MainButton } from "./mainButton";
+import styled from "styled-components";
+import { buttonNames } from "../../../const/buttons/names";
+import { IconComponent as Icon } from '../../../const/buttons/icons';
+import { useWorkSpaceStore } from "../../../store";
+
+type Props = {
+    size: "small" | "big";
+};
+
+const Container = styled.div<{ size: "small" | "big" }>`
+    ${(props) => props.size === "small" && "width: 100%;"}
+`;
+
+const Button = styled.div`
+    width: 100%;
+    cursor: pointer;
+    color: ${(props) => props.theme.textColor};
+`;
+
+const IconContainer = styled.div`
+    padding: 10px;
+`;
+
+export const QuitButton = ({ size }: Props) => {
+    const handleExit = () => {
+        window.electron.quitApp();
+    };
+
+    const { setWorkModule } = useWorkSpaceStore()
+
+    return (
+        <Container size={size} onClick={()=>setWorkModule('helloWindow')}>
+            {size === "big" ? (
+                <MainButton title="Выйти" size="big" />
+            ) : (
+                <Button>
+                    <IconContainer>
+                        <Icon name={buttonNames[12]} width="30" height="30"/>
+                    </IconContainer>
+                </Button>
+            )}
+        </Container>
+    );
+};

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

@@ -0,0 +1,26 @@
+import styled, { useTheme } from "styled-components";
+import { IconComponent as Icon } from '../../../const/theme/icons';
+import { ThemName } from "../../../const/theme/names";
+
+const Button = styled.div`
+    width: 100%;
+    cursor: pointer;
+`
+
+const IconContainer = styled.div`
+    padding: 10px;
+    color: ${props => props.theme.text};
+`
+
+export default function ThemeButton() {
+  const theme = useTheme();
+  const name = localStorage.getItem('theme') as ThemName
+  
+  return (
+    <Button onClick={theme.toggleTheme}>
+      <IconContainer>
+        <Icon name={name} width="30" height="30"/>
+      </IconContainer>
+    </Button>
+  );
+}