complete tv page and home

src/pages/home/components/home.button.tsx

@@ -0,0 +1,14 @@
+import classes from './styles.module.scss';
+
+type HomeButtonType = {
+  imgSrc: string;
+  onClick: () => void;
+};
+
+export const HomeButton = ({ imgSrc, onClick }: HomeButtonType) => {
+  return (
+    <button onClick={onClick} className={classes.button}>
+      <img src={imgSrc} className={classes.icon} />
+    </button>
+  );
+};

src/pages/home/components/index.ts

@@ -0,0 +1 @@
+export { HomeButton } from './home.button';

src/pages/home/components/styles.module.scss

@@ -0,0 +1,31 @@
+@use '@shared/assets/styles/adaptive' as adaptive;
+@use '@shared/assets/styles/theme' as theme;
+
+$adaptive: (
+    desktop: (
+        size: 250px,
+    ),
+    table: (
+        size: 250px,
+    ),
+    mobile: (
+        size: auto,
+    ),
+);
+
+.button {
+    border: 0;
+    background-color: transparent;
+    border: 2px solid transparent;
+    border-radius: 16px;
+    transition: 0.3s ease;
+    cursor: pointer;
+
+    .icon {
+        padding: 8px;
+        @include adaptive.set-adaptive($adaptive, width, size);
+        @include adaptive.set-adaptive($adaptive, height, size);
+    }
+
+    &:hover { @include theme.hoverBorder(); }
+}

src/pages/home/home.page.tsx

@@ -1,11 +1,27 @@
 import classes from './styles.module.scss';
-import Laptop from '@shared/assets/icons/laptop.svg';
+import TV from '@shared/assets/images/tv.png';
+import Laptop from '@shared/assets/images/laptop.png';
+import { HomeButton } from './components/home.button';
+import { useNavigate } from 'react-router-dom';
 
 const HomePage = () => {
+  const navigation = useNavigate();
+
+  const handleLaptopRedirect = () => {
+    navigation('/laptop');
+  };
+
+  const handleTVRedirect = () => {
+    navigation('/tv');
+  };
+
   return (
     <div className={classes.home}>
-      <Laptop className={classes.laptop} />
+      <h1 className={classes.title}>Выберите тип обученной модели</h1>
-      <div className={classes.container}></div>
+      <div className={classes.container}>
+        <HomeButton imgSrc={Laptop} onClick={handleLaptopRedirect} />
+        <HomeButton imgSrc={TV} onClick={handleTVRedirect} />
+      </div>
     </div>
   );
 };

src/pages/home/styles.module.scss

@@ -1,36 +1,20 @@
-@use '../../shared/assets/styles/adaptive' as adaptive;
+@use '@shared/assets/styles/fonts' as fonts;
-
-$adaptive: (
-    desktop: (
-        flex-direction: row,
-        size: 250px,
-        container-width: 768px
-    ),
-    table: (
-        flex-direction: row,
-        size: 250px,
-        container-width: 425px
-    ),
-    mobile: (
-        flex-direction: column,
-        size: auto,
-        container-width: auto
-    ),
-);
 
 .home {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     width: 100%;
-    @include adaptive.set-adaptive($adaptive, flex-direction, flex-direction);
+    gap: 36px;
 
-    .laptop {
+    .title {
-        @include adaptive.set-adaptive($adaptive, width, size);
+        margin: 0 auto;
-        @include adaptive.set-adaptive($adaptive, height, size);
+        @include fonts.urbanist-font(40px, 600);
     }
 
     .container {
-        padding: 15px;
+        display: flex;
-        @include adaptive.set-adaptive($adaptive, width, container-width);
+        margin: 0 auto;
+        gap: 24px;
     }
 }

src/pages/index.tsx

@@ -1,13 +1,13 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Layout from '@app/layout/layout';
 import HomePage from '@pages/home/home.page';
-import { LaptopPage } from '@pages/laptop';
+import { LaptopPredictPage } from '@pages/laptop';
-// import { TVPage } from '@pages/tv/tv.page';
+import { TVPredictPage } from '@pages/tv';
 
 const routes = [
   { path: '/', element: <HomePage /> },
-  { path: '/laptop', element: <LaptopPage /> },
+  { path: '/laptop', element: <LaptopPredictPage /> },
-  // { path: '/tv', element: <TVPage /> },
+  { path: '/tv', element: <TVPredictPage /> },
 ];
 
 const Index = () => {

src/pages/laptop/index.ts

@@ -1 +1 @@
-export { default as LaptopPage } from './laptop.page';
+export { default as LaptopPredictPage } from './laptop.page';

src/pages/laptop/styles.module.scss

@@ -27,6 +27,10 @@ $adaptive: (
     .icon {
         @include adaptive.set-adaptive($adaptive, width, size);
         @include adaptive.set-adaptive($adaptive, height, size);
+
+        @media (max-width: 768px) {
+            padding: 8px;
+        }
     }
 
     .container {

src/pages/tv/index.ts

@@ -0,0 +1 @@
+export { default as TVPredictPage } from './tv.page';

src/pages/tv/styles.module.scss

@@ -27,6 +27,10 @@ $adaptive: (
     .icon {
         @include adaptive.set-adaptive($adaptive, width, size);
         @include adaptive.set-adaptive($adaptive, height, size);
+
+        @media (max-width: 768px) {
+            padding: 8px;
+        }
     }
 
     .container {

src/pages/tv/tv.page.tsx

@@ -1,73 +1,82 @@
-// import Form from '@/widgets/form/form.widget';
+import Form from '@/widgets/form/form.widget';
-// import classes from './styles.module.scss';
+import classes from './styles.module.scss';
-// import TV from '@shared/assets/images/tv.png';
+import TV from '@shared/assets/images/tv.png';
-// import { FormEvent, useCallback, useEffect, useState } from 'react';
+import { FormEvent, useCallback, useEffect, useState } from 'react';
-// import {
+import {
-//   TVCreatePredictType,
+  TVCreatePredictType,
-//   TVGetDataPredictType,
+  TVGetDataPredictType,
-//   PredictResponseType,
+  PredictResponseType,
-// } from '@/shared/types';
+} from '@/shared/types';
-// import { apiTV } from '@/shared/api';
+import { apiTV } from '@/shared/api';
 
-// const TVPredictPage = () => {
+const TVPredictPage = () => {
-//   const [requestSelectorsData, setRequestSelectorsData] = useState<
+  const [requestSelectorsData, setRequestSelectorsData] = useState<
-//     TVGetDataPredictType | undefined
+    TVGetDataPredictType | undefined
-//   >();
+  >();
 
-//   const [request, setRequest] = useState<TVCreatePredictType>({
+  const [request, setRequest] = useState<TVCreatePredictType>({
-//     display
+    display: '',
-//   });
+    tuners: '',
+    features: '',
+    os: '',
+    power_of_volume: '',
+    screen_size: 0,
+    color: '',
+  });
 
-//   const [response, setResponse] = useState<PredictResponseType>({
+  const [response, setResponse] = useState<PredictResponseType>({
-//     predicted_price: undefined,
+    predicted_price: undefined,
-//   });
+  });
 
-//   const handleGetPredict = async (event: FormEvent) => {
+  const handleGetPredict = async (event: FormEvent) => {
-//     event.preventDefault();
+    event.preventDefault();
-//     console.log(request);
+    console.log(request);
-//     const newResponse = await apiTV.predictPrice(request);
+    const newResponse = await apiTV.predictPrice(request);
-//     setResponse(newResponse);
+    setResponse(newResponse);
-//   };
+  };
 
-//   const handleInputChange = useCallback(
+  const handleInputChange = useCallback(
-//     (updatedRequest: TVCreatePredictType) => {
+    (updatedRequest: TVCreatePredictType) => {
-//       setRequest(updatedRequest);
+      setRequest(updatedRequest);
-//     },
+    },
-//     [],
+    [],
-//   );
+  );
 
-//   const updateField = (field: string, value: string) => {
+  const updateField = (
-//     handleInputChange({
+    field: keyof TVGetDataPredictType,
-//       ...request,
+    value: string | number,
-//       [field]: value,
+  ) => {
-//     });
+    handleInputChange({
-//   };
+      ...request,
+      [field]: value,
+    });
+  };
 
-//   useEffect(() => {
+  useEffect(() => {
-//     const fetchData = async () => {
+    const fetchData = async () => {
-//       const responseSelectorData = await apiTV.getDataForRequest();
+      const responseSelectorData = await apiTV.getDataForRequest();
-//       if (!responseSelectorData) {
+      if (!responseSelectorData) {
-//         return;
+        return;
-//       }
+      }
-//       setRequestSelectorsData(responseSelectorData);
+      setRequestSelectorsData(responseSelectorData);
-//     };
+    };
 
-//     fetchData();
+    fetchData();
-//   }, []);
+  }, []);
 
-//   return (
+  return (
-//     <div className={classes.tv}>
+    <div className={classes.tv}>
-//       <img src={TV} className={classes.icon} />
+      <img src={TV} className={classes.icon} />
-//       <div className={classes.container}>
+      <div className={classes.container}>
-//         <Form
+        <Form
-//           selectorsData={requestSelectorsData}
+          selectorsData={requestSelectorsData}
-//           updateField={updateField}
+          updateField={updateField}
-//           handleGetPredict={handleGetPredict}
+          handleGetPredict={handleGetPredict}
-//           response={response}
+          response={response}
-//         />
+        />
-//       </div>
+      </div>
-//     </div>
+    </div>
-//   );
+  );
-// };
+};
 
-// export default TVPredictPage;
+export default TVPredictPage;

src/widgets/form/form.widget.tsx

@@ -35,6 +35,7 @@ const Form = <T extends Record<string, string[] | number[]>>({
           </Expander>
         ))}
       </div>
+      <div className={classes.divider} />
       <Button onClick={(e: FormEvent) => handleGetPredict(e)}>Submit</Button>
       {response.predicted_price !== undefined && (
         <span style={{ color: 'white' }}>

src/widgets/form/styles.module.scss

@@ -14,4 +14,11 @@
         flex-direction: column;
         gap: 8px;
     }
+
+    .divider {
+        height: 4px;
+        width: 100%;
+        background-color: var(--primary-white);
+        border-radius: 8px;
+    }
 }

src/widgets/navbar/navbar.widget.tsx

@@ -1,11 +1,20 @@
+import { useNavigate } from 'react-router-dom';
 import classes from './styles.module.scss';
 
 const Navbar = () => {
+  const navigation = useNavigate();
+
+  const handleHomeRedirect = () => {
+    navigation('/');
+  };
+
   return (
     <nav className={classes.navbar}>
       <div className={classes.container}>
         <div className={classes.logo}>
-          <h1 className={classes.title}>Price Builder</h1>
+          <h1 className={classes.title} onClick={handleHomeRedirect}>
+            Price Builder
+          </h1>
           <span className={classes.version}>v1.0.0</span>
         </div>
       </div>

src/widgets/navbar/styles.module.scss

@@ -26,6 +26,7 @@ $adaptive: (
             color: var(--primary-black);
 
             .title {
+                cursor: pointer;
                 margin: 0;
                 transition: 0.3s ease;
                 @include fonts.urbanist-font(36px, 600);