From fb64dfa1b70ca5623b1e51947232fe3ffe4dc73f Mon Sep 17 00:00:00 2001 From: maxnes3 Date: Wed, 11 Dec 2024 13:39:57 +0400 Subject: [PATCH] add motion --- package-lock.json | 39 +++++++++++++++++++- package.json | 1 + src/pages/home/components/styles.module.scss | 2 +- src/pages/home/home.page.tsx | 31 ++++++++++++++-- src/pages/home/index.ts | 1 + src/pages/home/styles.module.scss | 14 +++++++ src/pages/index.tsx | 2 +- src/pages/laptop/laptop.page.tsx | 30 +++++++++++++-- src/pages/tv/tv.page.tsx | 30 +++++++++++++-- src/widgets/navbar/navbar.widget.tsx | 16 +++++++- 10 files changed, 152 insertions(+), 14 deletions(-) create mode 100644 src/pages/home/index.ts diff --git a/package-lock.json b/package-lock.json index cbb2dc0..3367587 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "price-builder-frontend", "version": "0.0.0", "dependencies": { + "framer-motion": "^11.13.5", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.27.0" @@ -3801,6 +3802,33 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "11.13.5", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.5.tgz", + "integrity": "sha512-rArI0zPU9VkpS3Wt0J7dmRxAFUWtzPWoSofNQAP0UO276CmJ+Xlf5xN19GMw3w2QsdrS2sU+0+Q2vtuz4IEZaw==", + "license": "MIT", + "dependencies": { + "motion-dom": "^11.13.0", + "motion-utils": "^11.13.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -4751,6 +4779,16 @@ "node": "*" } }, + "node_modules/motion-dom": { + "version": "11.13.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz", + "integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w==" + }, + "node_modules/motion-utils": { + "version": "11.13.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz", + "integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A==" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -5790,7 +5828,6 @@ "version": "2.7.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==", - "dev": true, "license": "0BSD" }, "node_modules/type-check": { diff --git a/package.json b/package.json index 916d569..f723500 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "preview": "vite preview" }, "dependencies": { + "framer-motion": "^11.13.5", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.27.0" diff --git a/src/pages/home/components/styles.module.scss b/src/pages/home/components/styles.module.scss index f1407bf..e56c166 100644 --- a/src/pages/home/components/styles.module.scss +++ b/src/pages/home/components/styles.module.scss @@ -9,7 +9,7 @@ $adaptive: ( size: 250px, ), mobile: ( - size: auto, + size: 100%, ), ); diff --git a/src/pages/home/home.page.tsx b/src/pages/home/home.page.tsx index 99976f1..391f282 100644 --- a/src/pages/home/home.page.tsx +++ b/src/pages/home/home.page.tsx @@ -3,6 +3,7 @@ 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'; +import { motion } from 'framer-motion'; const HomePage = () => { const navigation = useNavigate(); @@ -15,13 +16,37 @@ const HomePage = () => { navigation('/tv'); }; + const titleVariants = { + hidden: { y: 100, opacity: 0 }, + visible: { y: 0, opacity: 1 }, + }; + + const containerVariants = { + hidden: { y: 100, opacity: 0 }, + visible: { y: 0, opacity: 1 }, + }; + return (
-

Выберите тип обученной модели

-
+ + Select the type of trained model + + -
+
); }; diff --git a/src/pages/home/index.ts b/src/pages/home/index.ts new file mode 100644 index 0000000..234795c --- /dev/null +++ b/src/pages/home/index.ts @@ -0,0 +1 @@ +export { default as HomePage } from './home.page'; diff --git a/src/pages/home/styles.module.scss b/src/pages/home/styles.module.scss index bd318cb..b8d7c00 100644 --- a/src/pages/home/styles.module.scss +++ b/src/pages/home/styles.module.scss @@ -1,4 +1,17 @@ @use '@shared/assets/styles/fonts' as fonts; +@use '@shared/assets/styles/adaptive' as adaptive; + +$adaptive: ( + desktop: ( + flex-direction: row, + ), + table: ( + flex-direction: row, + ), + mobile: ( + flex-direction: column, + ), +); .home { display: flex; @@ -16,5 +29,6 @@ display: flex; margin: 0 auto; gap: 24px; + @include adaptive.set-adaptive($adaptive, flex-direction, flex-direction); } } \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4f6533d..364c579 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,6 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Layout from '@app/layout/layout'; -import HomePage from '@pages/home/home.page'; +import { HomePage } from '@pages/home'; import { LaptopPredictPage } from '@pages/laptop'; import { TVPredictPage } from '@pages/tv'; diff --git a/src/pages/laptop/laptop.page.tsx b/src/pages/laptop/laptop.page.tsx index 989afed..b75011d 100644 --- a/src/pages/laptop/laptop.page.tsx +++ b/src/pages/laptop/laptop.page.tsx @@ -8,6 +8,7 @@ import { PredictResponseType, } from '@/shared/types'; import { apiLaptop } from '@/shared/api'; +import { motion } from 'framer-motion'; const LaptopPredictPage = () => { const [requestSelectorsData, setRequestSelectorsData] = useState< @@ -66,17 +67,40 @@ const LaptopPredictPage = () => { fetchData(); }, []); + const iconVariants = { + hidden: { x: -100, opacity: 0 }, + visible: { x: 0, opacity: 1 }, + }; + + const containerVariants = { + hidden: { x: 100, opacity: 0 }, + visible: { x: 0, opacity: 1 }, + }; + return (
- -
+ +
-
+
); }; diff --git a/src/pages/tv/tv.page.tsx b/src/pages/tv/tv.page.tsx index 8c52388..db61d38 100644 --- a/src/pages/tv/tv.page.tsx +++ b/src/pages/tv/tv.page.tsx @@ -8,6 +8,7 @@ import { PredictResponseType, } from '@/shared/types'; import { apiTV } from '@/shared/api'; +import { motion } from 'framer-motion'; const TVPredictPage = () => { const [requestSelectorsData, setRequestSelectorsData] = useState< @@ -64,17 +65,40 @@ const TVPredictPage = () => { fetchData(); }, []); + const iconVariants = { + hidden: { x: -100, opacity: 0 }, + visible: { x: 0, opacity: 1 }, + }; + + const containerVariants = { + hidden: { x: 100, opacity: 0 }, + visible: { x: 0, opacity: 1 }, + }; + return (
- -
+ + -
+
); }; diff --git a/src/widgets/navbar/navbar.widget.tsx b/src/widgets/navbar/navbar.widget.tsx index 390d1a3..da5f6b9 100644 --- a/src/widgets/navbar/navbar.widget.tsx +++ b/src/widgets/navbar/navbar.widget.tsx @@ -1,4 +1,5 @@ import { useNavigate } from 'react-router-dom'; +import { motion } from 'framer-motion'; import classes from './styles.module.scss'; const Navbar = () => { @@ -8,8 +9,19 @@ const Navbar = () => { navigation('/'); }; + const navbarVariants = { + hidden: { y: -100, opacity: 0 }, + visible: { y: 0, opacity: 1 }, + }; + return ( - + ); };