From 54ac7aa87033a357897e192dd7eeb70dcca87f80 Mon Sep 17 00:00:00 2001 From: maxnes3 Date: Wed, 11 Dec 2024 13:10:02 +0400 Subject: [PATCH] complete tv page and home --- src/pages/home/components/home.button.tsx | 14 ++ src/pages/home/components/index.ts | 1 + src/pages/home/components/styles.module.scss | 31 +++++ src/pages/home/home.page.tsx | 22 ++- src/pages/home/styles.module.scss | 34 ++--- src/pages/index.tsx | 8 +- src/pages/laptop/index.ts | 2 +- src/pages/laptop/styles.module.scss | 4 + src/pages/tv/index.ts | 1 + src/pages/tv/styles.module.scss | 4 + src/pages/tv/tv.page.tsx | 135 ++++++++++--------- src/widgets/form/form.widget.tsx | 1 + src/widgets/form/styles.module.scss | 7 + src/widgets/navbar/navbar.widget.tsx | 11 +- src/widgets/navbar/styles.module.scss | 1 + 15 files changed, 179 insertions(+), 97 deletions(-) create mode 100644 src/pages/home/components/home.button.tsx create mode 100644 src/pages/home/components/index.ts create mode 100644 src/pages/home/components/styles.module.scss 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 (