Sass learn

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.2",
     "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -1,19 +1,10 @@
-import Button from '@/components/ui/Button/Button';
-import EyeIcon from '@/components/ui/EyeIcon/EyeIcon';
+import Button from '@/components/ui/Button';
 
 const App = () => {
   return (
     <>
-      <EyeIcon width="18px" height="18px" isActive={true} onClick={() => console.log('EyeIcon clicked')} />
-      <br />
-      <Button
-        width="100px"
-        typeView="alt"
-        onClick={() => {
-          console.log('Button clicked');
-        }}
-      >
-        Ky
+      <Button width="232px" height="49px">
+        Login
       </Button>
     </>
   );

src/api/controllers/login.controller.ts

@@ -1,19 +1,21 @@
-export async function login(url: string, username: string, password: string): Promise<Response> {
+import axios, { AxiosResponse } from 'axios';
+
+export async function login(url: string, username: string, password: string): Promise<AxiosResponse> {
   const data = {
     username: username,
     password: password,
   };
 
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(data),
-    credentials: 'include',
-  });
-  if (!response.ok) {
+  try {
+    const response = await axios.post(url, data, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      withCredentials: true,
+    });
+
+    return response;
+  } catch (error) {
     throw new Error('Network response was not ok');
   }
-  return response;
 }

src/api/controllers/register.controller.ts

@@ -1,17 +1,23 @@
-export async function register(url: string, email: string, username: string, password: string): Promise<Response> {
+import axios, { AxiosResponse } from 'axios';
+
+export async function register(url: string, email: string, username: string, password: string): Promise<AxiosResponse> {
   const data = {
     email,
     username,
     password,
   };
 
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(data),
-    credentials: 'include',
-  });
-  return response;
+  try {
+    const response = await axios.post(url, data, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      withCredentials: true,
+    });
+
+    return response;
+  } catch (error) {
+    // Обрабатывайте ошибки, если это необходимо
+    throw new Error('Network response was not ok');
+  }
 }

src/components/ui/Button/Button.tsx

@@ -1,9 +1,6 @@
 import { FC, MouseEventHandler } from 'react';
 import ButtonView, { IButtonViewProps } from './ButtonView';
 
-import styles from './styles/ButtonView.module.scss';
-import classnames from 'classnames';
-
 interface IButtonProps extends IButtonViewProps {
   typeView?: 'def' | 'alt';
 }
@@ -13,12 +10,8 @@ const Button: FC<IButtonProps> = ({ children, typeView = 'def', onClick, ...prop
     onClick?.(event);
   };
 
-  const combinedClassName = classnames(styles.button, {
-    [styles.alt]: typeView === 'alt',
-  });
-
   return (
-    <ButtonView {...props} className={combinedClassName} onClick={handleClick}>
+    <ButtonView {...props} onClick={handleClick}>
       {children}
     </ButtonView>
   );

src/components/ui/Button/ButtonView.tsx

@@ -1,22 +1,30 @@
 import { FC, ReactNode, ButtonHTMLAttributes, CSSProperties } from 'react';
+import classnames from 'classnames';
+
+import styles from './styles/ButtonView.module.scss';
 
 interface IButtonStyleProps {
   width?: number | string;
   height?: number | string;
+  typeView?: 'def' | 'alt';
 }
 
 export interface IButtonViewProps extends ButtonHTMLAttributes<HTMLButtonElement>, IButtonStyleProps {
   children?: ReactNode;
 }
 
-const ButtonView: FC<IButtonViewProps> = ({ children, width, height, className, ...props }) => {
+const ButtonView: FC<IButtonViewProps> = ({ children, width, height, className, typeView, ...props }) => {
   const buttonStyle: CSSProperties = {
     width: width,
     height: height,
   };
 
+  const combinedClassName = classnames(styles.button, className, {
+    [styles.alt]: typeView === 'alt',
+  });
+
   return (
-    <button className={className} style={buttonStyle} {...props}>
+    <button className={combinedClassName} style={buttonStyle} {...props}>
       {children}
     </button>
   );

src/components/ui/Button/index.ts

@@ -1 +1,3 @@
-export * from './Button';
+import Button from './Button';
+
+export default Button;

src/components/ui/EyeIcon/index.ts

@@ -1 +1,3 @@
-export * from './EyeIcon';
+import EyeIcon from './EyeIcon';
+
+export default EyeIcon;

src/components/ui/Input/Input.tsx

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import InputView, { IInputViewProps } from './InputView';
+
+interface IInput extends IInputViewProps {}
+
+const Input: FC<IInput> = ({ ...props }) => {
+  return <InputView {...props} />;
+};
+
+export default Input;

src/components/ui/Input/InputView.tsx

@@ -0,0 +1,22 @@
+import { FC, InputHTMLAttributes } from 'react';
+import EyeIcon from '../EyeIcon';
+
+import styles from './styles/Input.module.scss';
+
+export interface IInputViewProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+const InputView: FC<IInputViewProps> = ({ width, height, label, id, type }) => {
+  return (
+    <div style={{ width: width, height: height }}>
+      {label ? <label htmlFor={id}>{label}</label> : ''}
+      <div>
+        <input type={type} id={id} />
+        <EyeIcon />
+      </div>
+    </div>
+  );
+};
+
+export default InputView;

src/components/ui/Input/index.ts

@@ -0,0 +1,3 @@
+import Input from './Input';
+
+export default Input;

src/components/ui/Input/styles/Input.module.scss

@@ -0,0 +1,5 @@
+@import url('./src/styles/fonts.module.scss');
+
+.test {
+  font: optional;
+}

src/styles/fonts.module.scss

@@ -0,0 +1,41 @@
+@import url('./variables.scss');
+
+.__font_700_37 {
+  font-size: 37px;
+  font-weight: 700;
+  font-family: $font-family-main;
+  font-style: normal;
+  line-height: normal;
+}
+
+.__font_400_25 {
+  font-size: 25px;
+  font-weight: 400;
+  font-family: $font-family-main;
+  font-style: normal;
+  line-height: normal;
+}
+
+.__font_400_16 {
+  font-size: 16px;
+  font-weight: 400;
+  font-family: $font-family-main;
+  font-style: normal;
+  line-height: normal;
+}
+
+.__font_300_15 {
+  font-size: 15px;
+  font-weight: 300;
+  font-family: $font-family-main;
+  font-style: normal;
+  line-height: normal;
+}
+
+.__font_300_12 {
+  font-size: 12px;
+  font-weight: 300;
+  font-family: $font-family-main;
+  font-style: normal;
+  line-height: normal;
+}

src/styles/index.scss

@@ -1,3 +1,6 @@
+@use './variables.scss' as *;
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
+
 /* Custom reset */
 
 *,
@@ -43,3 +46,45 @@ h2 {
   font-weight: 700;
   line-height: normal;
 }
+
+// Fonts
+
+.__font_700_37 {
+  font-size: 37px;
+  font-weight: 700;
+  font-family: $font-family-main;
+  font-style: normal;
+  line-height: normal;
+}
+
+.__font_400_25 {
+  font-size: 25px;
+  font-weight: 400;
+  font-family: $font-family-main;
+  font-style: normal;
+  line-height: normal;
+}
+
+.__font_400_16 {
+  font-size: 16px;
+  font-weight: 400;
+  font-family: $font-family-main;
+  font-style: normal;
+  line-height: normal;
+}
+
+.__font_300_15 {
+  font-size: 15px;
+  font-weight: 300;
+  font-family: $font-family-main;
+  font-style: normal;
+  line-height: normal;
+}
+
+.__font_300_12 {
+  font-size: 12px;
+  font-weight: 300;
+  font-family: $font-family-main;
+  font-style: normal;
+  line-height: normal;
+}

src/styles/variables.scss

@@ -0,0 +1,20 @@
+// Variables
+
+$font-family-main: 'Poppins', 'Montserrat', sans-serif;
+
+$font-weight-bold: 700;
+$font-weight-normal: 400;
+$font-weight-light: 300;
+
+$font-size-37: 37px;
+$font-size-25: 25px;
+$font-size-16: 16px;
+$font-size-15: 15px;
+$font-size-12: 12px;
+
+$color-white: #fff;
+$color-subtle-white: #fffefc;
+$color-black: #000;
+$color-beige: #9e896a;
+$color-gray: #5b5b5b;
+$color-light-gray: #acacac;