diff --git a/src/pages/home/components/home.button.tsx b/src/pages/home/components/home.button.tsx
new file mode 100644
index 0000000..dfb9fbb
--- /dev/null
+++ b/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 (
+
+ );
+};
diff --git a/src/pages/home/components/index.ts b/src/pages/home/components/index.ts
new file mode 100644
index 0000000..4a5cfe5
--- /dev/null
+++ b/src/pages/home/components/index.ts
@@ -0,0 +1 @@
+export { HomeButton } from './home.button';
diff --git a/src/pages/home/components/styles.module.scss b/src/pages/home/components/styles.module.scss
new file mode 100644
index 0000000..f1407bf
--- /dev/null
+++ b/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(); }
+}
\ No newline at end of file
diff --git a/src/pages/home/home.page.tsx b/src/pages/home/home.page.tsx
index 614c863..99976f1 100644
--- a/src/pages/home/home.page.tsx
+++ b/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 (
-
-
+
Выберите тип обученной модели
+
+
+
+
);
};
diff --git a/src/pages/home/styles.module.scss b/src/pages/home/styles.module.scss
index 065ade8..bd318cb 100644
--- a/src/pages/home/styles.module.scss
+++ b/src/pages/home/styles.module.scss
@@ -1,36 +1,20 @@
-@use '../../shared/assets/styles/adaptive' as adaptive;
-
-$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
- ),
-);
+@use '@shared/assets/styles/fonts' as fonts;
.home {
display: flex;
+ flex-direction: column;
justify-content: center;
width: 100%;
- @include adaptive.set-adaptive($adaptive, flex-direction, flex-direction);
+ gap: 36px;
- .laptop {
- @include adaptive.set-adaptive($adaptive, width, size);
- @include adaptive.set-adaptive($adaptive, height, size);
+ .title {
+ margin: 0 auto;
+ @include fonts.urbanist-font(40px, 600);
}
.container {
- padding: 15px;
- @include adaptive.set-adaptive($adaptive, width, container-width);
+ display: flex;
+ margin: 0 auto;
+ gap: 24px;
}
}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6f9aa3d..4f6533d 100644
--- a/src/pages/index.tsx
+++ b/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 { TVPage } from '@pages/tv/tv.page';
+import { LaptopPredictPage } from '@pages/laptop';
+import { TVPredictPage } from '@pages/tv';
const routes = [
{ path: '/', element: },
- { path: '/laptop', element: },
- // { path: '/tv', element: },
+ { path: '/laptop', element: },
+ { path: '/tv', element: },
];
const Index = () => {
diff --git a/src/pages/laptop/index.ts b/src/pages/laptop/index.ts
index 09a8e61..0f1fbe4 100644
--- a/src/pages/laptop/index.ts
+++ b/src/pages/laptop/index.ts
@@ -1 +1 @@
-export { default as LaptopPage } from './laptop.page';
+export { default as LaptopPredictPage } from './laptop.page';
diff --git a/src/pages/laptop/styles.module.scss b/src/pages/laptop/styles.module.scss
index 46abeb4..4fa7e79 100644
--- a/src/pages/laptop/styles.module.scss
+++ b/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 {
diff --git a/src/pages/tv/index.ts b/src/pages/tv/index.ts
index e69de29..89c68ff 100644
--- a/src/pages/tv/index.ts
+++ b/src/pages/tv/index.ts
@@ -0,0 +1 @@
+export { default as TVPredictPage } from './tv.page';
diff --git a/src/pages/tv/styles.module.scss b/src/pages/tv/styles.module.scss
index 488129d..aa1092a 100644
--- a/src/pages/tv/styles.module.scss
+++ b/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 {
diff --git a/src/pages/tv/tv.page.tsx b/src/pages/tv/tv.page.tsx
index e8532b5..8c52388 100644
--- a/src/pages/tv/tv.page.tsx
+++ b/src/pages/tv/tv.page.tsx
@@ -1,73 +1,82 @@
-// import Form from '@/widgets/form/form.widget';
-// import classes from './styles.module.scss';
-// import TV from '@shared/assets/images/tv.png';
-// import { FormEvent, useCallback, useEffect, useState } from 'react';
-// import {
-// TVCreatePredictType,
-// TVGetDataPredictType,
-// PredictResponseType,
-// } from '@/shared/types';
-// import { apiTV } from '@/shared/api';
+import Form from '@/widgets/form/form.widget';
+import classes from './styles.module.scss';
+import TV from '@shared/assets/images/tv.png';
+import { FormEvent, useCallback, useEffect, useState } from 'react';
+import {
+ TVCreatePredictType,
+ TVGetDataPredictType,
+ PredictResponseType,
+} from '@/shared/types';
+import { apiTV } from '@/shared/api';
-// const TVPredictPage = () => {
-// const [requestSelectorsData, setRequestSelectorsData] = useState<
-// TVGetDataPredictType | undefined
-// >();
+const TVPredictPage = () => {
+ const [requestSelectorsData, setRequestSelectorsData] = useState<
+ TVGetDataPredictType | undefined
+ >();
-// const [request, setRequest] = useState({
-// display
-// });
+ const [request, setRequest] = useState({
+ display: '',
+ tuners: '',
+ features: '',
+ os: '',
+ power_of_volume: '',
+ screen_size: 0,
+ color: '',
+ });
-// const [response, setResponse] = useState({
-// predicted_price: undefined,
-// });
+ const [response, setResponse] = useState({
+ predicted_price: undefined,
+ });
-// const handleGetPredict = async (event: FormEvent) => {
-// event.preventDefault();
-// console.log(request);
-// const newResponse = await apiTV.predictPrice(request);
-// setResponse(newResponse);
-// };
+ const handleGetPredict = async (event: FormEvent) => {
+ event.preventDefault();
+ console.log(request);
+ const newResponse = await apiTV.predictPrice(request);
+ setResponse(newResponse);
+ };
-// const handleInputChange = useCallback(
-// (updatedRequest: TVCreatePredictType) => {
-// setRequest(updatedRequest);
-// },
-// [],
-// );
+ const handleInputChange = useCallback(
+ (updatedRequest: TVCreatePredictType) => {
+ setRequest(updatedRequest);
+ },
+ [],
+ );
-// const updateField = (field: string, value: string) => {
-// handleInputChange({
-// ...request,
-// [field]: value,
-// });
-// };
+ const updateField = (
+ field: keyof TVGetDataPredictType,
+ value: string | number,
+ ) => {
+ handleInputChange({
+ ...request,
+ [field]: value,
+ });
+ };
-// useEffect(() => {
-// const fetchData = async () => {
-// const responseSelectorData = await apiTV.getDataForRequest();
-// if (!responseSelectorData) {
-// return;
-// }
-// setRequestSelectorsData(responseSelectorData);
-// };
+ useEffect(() => {
+ const fetchData = async () => {
+ const responseSelectorData = await apiTV.getDataForRequest();
+ if (!responseSelectorData) {
+ return;
+ }
+ setRequestSelectorsData(responseSelectorData);
+ };
-// fetchData();
-// }, []);
+ fetchData();
+ }, []);
-// return (
-//
-//

-//
-//
-//
-//
-// );
-// };
+ return (
+
+

+
+
+
+
+ );
+};
-// export default TVPredictPage;
+export default TVPredictPage;
diff --git a/src/widgets/form/form.widget.tsx b/src/widgets/form/form.widget.tsx
index b52ed1a..e60ff53 100644
--- a/src/widgets/form/form.widget.tsx
+++ b/src/widgets/form/form.widget.tsx
@@ -35,6 +35,7 @@ const Form = >({
))}
+
{response.predicted_price !== undefined && (
diff --git a/src/widgets/form/styles.module.scss b/src/widgets/form/styles.module.scss
index be14042..bab487c 100644
--- a/src/widgets/form/styles.module.scss
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/src/widgets/navbar/navbar.widget.tsx b/src/widgets/navbar/navbar.widget.tsx
index 721d5d9..390d1a3 100644
--- a/src/widgets/navbar/navbar.widget.tsx
+++ b/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 (