commit

src/app/layout/layout.tsx

@@ -1,16 +1,15 @@
 import { FC } from 'react';
 import { LayoutRouteProps } from 'react-router-dom';
-import classes from './styles.module.scss';
 import { Navbar } from '@/widgets/navbar';
-import { Footer } from '@/widgets/footer';
+// import { Footer } from '@/widgets/footer';s
 
 const Layout: FC<LayoutRouteProps> = ({ children }) => {
   return (
-    <div className={classes.container}>
+    <>
-        <Navbar />
+      <Navbar />
-        <main>{children}</main>
+      <main>{children}</main>
-        <Footer />
+      {/* <Footer /> */}
-    </div>
+    </>
   );
 };
 

src/app/layout/styles.module.scss

@@ -1,19 +0,0 @@
-@use '../../shared/assets/styles/adaptive' as adaptive;
-
-$adaptive: (
-    desktop: (
-        container: 1240px
-    ),
-    laptop: (
-        container: 886px
-    ),
-    mobile: (
-        container: 315px
-    ),
-);
-
-.container {
-    position: relative;
-    margin: 0 auto;
-    @include adaptive.set-adaptive($adaptive, max-width, container);
-}

src/pages/home/home.page.tsx

@@ -1,5 +1,11 @@
+import classes from './styles.module.scss';
+
 const HomePage = () => {
-  return <></>;
+  return (
+    <div className={classes.home}>
+      <div className={classes.container}></div>
+    </div>
+  );
 };
 
 export default HomePage;

src/pages/home/styles.module.scss

@@ -0,0 +1,13 @@
+@use '../../shared/assets/styles/adaptive' as adaptive;
+
+.home {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 1000px;
+
+    .container {
+        padding: 15px;
+        @include adaptive.container;
+    }
+}

src/shared/api/api.ts

@@ -0,0 +1,17 @@
+import axios from 'axios';
+import { PredictRequestType, PredictResponseType } from '../types/predict';
+
+class Api {
+  readonly baseURL = `${import.meta.env.VITE_SERVER_URL}`;
+
+  predictPrice = async (data: PredictRequestType) => {
+    const response = await axios.post<PredictResponseType>(
+      `${this.baseURL}/predict_price`,
+      data,
+    );
+    return response.data;
+  };
+}
+
+const api = new Api();
+export default api;

src/shared/assets/styles/_adaptive.scss

@@ -3,13 +3,13 @@ $breakpoints: (
     max: 1440px,
     min: 1024.1px
   ),
-  laptop: (
+  table: (
     max: 1024px,
-    min: 375.1px
+    min: 768.1px
   ),
   mobile: (
-    max: 375px,
+    max: 768px,
-    min: 0px
+    min: 375px
   ),
 );
 
@@ -31,3 +31,19 @@ $breakpoints: (
     }
   }
 }
+
+$container: (
+  desktop: (
+    max: 1024px
+  ),
+  table: (
+    max: 768px
+  ),
+  mobile: (
+    max: 375px
+  ),
+);
+
+@mixin container {
+  @include set-adaptive($container, width, max);
+}

src/shared/assets/styles/_colors.scss

@@ -0,0 +1,5 @@
+:root {
+    --primary-black: #000000;
+    --transparent-black: rgba(0, 0, 0, 0.8);
+    --primary-white: #ffffff;
+}

src/shared/assets/styles/globals.scss

@@ -1,2 +1,10 @@
 @use './adaptive';
 @use './fonts';
+@use './colors';
+
+body {
+    margin: 0;
+    padding: 0;
+    background-image: url('../icons/background.jpg');
+    background-size: cover;
+}

src/shared/components/button/button.component.tsx

@@ -1,5 +1,7 @@
 import classes from './styles.module.scss';
 
-const Button = () => {};
+const Button = () => {
+  return <></>;
+};
 
 export default Button;

src/shared/types/predict.ts

@@ -0,0 +1,7 @@
+export type PredictRequestType = {
+
+}
+
+export type PredictResponseType = {
+    
+}

src/widgets/footer/footer.widget.tsx

@@ -1,5 +1,7 @@
+import classes from './styles.module.scss';
+
 const Footer = () => {
-    return <></>;
+  return <footer className={classes.footer}>Просто шаблон</footer>;
 };
 
 export default Footer;

src/widgets/footer/styles.module.scss

@@ -0,0 +1,7 @@
+.footer {
+    display: flex;
+    background-color: var(--primary-black);
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+}

src/widgets/form/form.widget.tsx

@@ -0,0 +1,24 @@
+import api from '@/shared/api/api';
+import {
+  PredictRequestType,
+  PredictResponseType,
+} from '@/shared/types/predict';
+import { useState } from 'react';
+import classes from './styles.module.scss';
+
+const Form = () => {
+  const [request, setRequest] = useState<PredictRequestType>({});
+  const [response, setResponse] = useState<PredictResponseType>({});
+
+  const handleGetPredict = async () => {
+    const newResponse = await api.predictPrice(request);
+  };
+
+  return (
+    <form>
+      <div className={classes.}></div>
+    </form>
+  );
+};
+
+export default Form;

src/widgets/form/styles.module.scss

@@ -0,0 +1,27 @@
+@use '../../shared/assets/styles/adaptive' as adaptive;
+
+.navbar {
+    display: flex;
+    background-color: var(--transparent-black);
+    backdrop-filter: blur(10px);
+    width: 100%;
+    justify-content: center;
+
+    .container {
+        padding: 15px;
+        @include adaptive.container;
+
+        .logo {
+            display: flex;
+            flex-direction: row;
+            justify-content: start;
+            align-items: end;
+            gap: 8px;
+            color: var(--primary-white);
+
+            .title {
+                margin: 0;
+            }
+        }
+    }
+}

src/widgets/navbar/navbar.widget.tsx

@@ -1,5 +1,16 @@
+import classes from './styles.module.scss';
+
 const Navbar = () => {
-    return <></>;
+  return (
+    <nav className={classes.navbar}>
+      <div className={classes.container}>
+        <div className={classes.logo}>
+          <h2 className={classes.title}>Price Builder</h2>
+          <span>v1.0.0</span>
+        </div>
+      </div>
+    </nav>
+  );
 };
 
 export default Navbar;

src/widgets/navbar/styles.module.scss

@@ -0,0 +1,27 @@
+@use '../../shared/assets/styles/adaptive' as adaptive;
+
+.navbar {
+    display: flex;
+    background-color: var(--transparent-black);
+    backdrop-filter: blur(10px);
+    width: 100%;
+    justify-content: center;
+
+    .container {
+        padding: 15px;
+        @include adaptive.container;
+
+        .logo {
+            display: flex;
+            flex-direction: row;
+            justify-content: start;
+            align-items: end;
+            gap: 8px;
+            color: var(--primary-white);
+
+            .title {
+                margin: 0;
+            }
+        }
+    }
+}