added planning component
This commit is contained in:
VyacheslavShtyrlin
Generated
+14
-66
@@ -19,12 +19,12 @@
|
||||
"@types/react-redux": "^7.1.24",
|
||||
"@types/react-router": "^5.1.20",
|
||||
"@types/socket.io": "^3.0.2",
|
||||
"connected-react-router": "^6.9.3",
|
||||
"framer-motion": "^7.4.0",
|
||||
"i18next": "^22.4.6",
|
||||
"i18next-browser-languagedetector": "^7.0.1",
|
||||
"i18next-http-backend": "^2.1.1",
|
||||
"js-cookie": "^3.0.1",
|
||||
"moment": "^2.29.4",
|
||||
"peer": "^0.6.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
@@ -5777,26 +5777,6 @@
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/connected-react-router": {
|
||||
"version": "6.9.3",
|
||||
"resolved": "https://registry.npmjs.org/connected-react-router/-/connected-react-router-6.9.3.tgz",
|
||||
"integrity": "sha512-4ThxysOiv/R2Dc4Cke1eJwjKwH1Y51VDwlOrOfs1LjpdYOVvCNjNkZDayo7+sx42EeGJPQUNchWkjAIJdXGIOQ==",
|
||||
"dependencies": {
|
||||
"lodash.isequalwith": "^4.4.0",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"immutable": "^3.8.1 || ^4.0.0",
|
||||
"seamless-immutable": "^7.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"history": "^4.7.2",
|
||||
"react": "^16.4.0 || ^17.0.0",
|
||||
"react-redux": "^6.0.0 || ^7.1.0",
|
||||
"react-router": "^4.3.1 || ^5.0.0",
|
||||
"redux": "^3.6.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/content-disposition": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
||||
@@ -8983,12 +8963,6 @@
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
|
||||
"integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
@@ -11710,11 +11684,6 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
|
||||
},
|
||||
"node_modules/lodash.isequalwith": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz",
|
||||
"integrity": "sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ=="
|
||||
},
|
||||
"node_modules/lodash.memoize": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
||||
@@ -12018,6 +11987,14 @@
|
||||
"mkdirp": "bin/cmd.js"
|
||||
}
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.29.4",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
|
||||
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
@@ -15231,12 +15208,6 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/seamless-immutable": {
|
||||
"version": "7.1.4",
|
||||
"resolved": "https://registry.npmjs.org/seamless-immutable/-/seamless-immutable-7.1.4.tgz",
|
||||
"integrity": "sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
@@ -21618,17 +21589,6 @@
|
||||
"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
|
||||
"integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA=="
|
||||
},
|
||||
"connected-react-router": {
|
||||
"version": "6.9.3",
|
||||
"resolved": "https://registry.npmjs.org/connected-react-router/-/connected-react-router-6.9.3.tgz",
|
||||
"integrity": "sha512-4ThxysOiv/R2Dc4Cke1eJwjKwH1Y51VDwlOrOfs1LjpdYOVvCNjNkZDayo7+sx42EeGJPQUNchWkjAIJdXGIOQ==",
|
||||
"requires": {
|
||||
"immutable": "^3.8.1 || ^4.0.0",
|
||||
"lodash.isequalwith": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"seamless-immutable": "^7.1.3"
|
||||
}
|
||||
},
|
||||
"content-disposition": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
||||
@@ -23912,12 +23872,6 @@
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
|
||||
"integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ=="
|
||||
},
|
||||
"immutable": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
|
||||
"integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
|
||||
"optional": true
|
||||
},
|
||||
"import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
@@ -25881,11 +25835,6 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
|
||||
},
|
||||
"lodash.isequalwith": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz",
|
||||
"integrity": "sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ=="
|
||||
},
|
||||
"lodash.memoize": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
||||
@@ -26112,6 +26061,11 @@
|
||||
"minimist": "^1.2.6"
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.29.4",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
|
||||
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
@@ -28241,12 +28195,6 @@
|
||||
"ajv-keywords": "^3.5.2"
|
||||
}
|
||||
},
|
||||
"seamless-immutable": {
|
||||
"version": "7.1.4",
|
||||
"resolved": "https://registry.npmjs.org/seamless-immutable/-/seamless-immutable-7.1.4.tgz",
|
||||
"integrity": "sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==",
|
||||
"optional": true
|
||||
},
|
||||
"select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
|
||||
+1
-1
@@ -14,12 +14,12 @@
|
||||
"@types/react-redux": "^7.1.24",
|
||||
"@types/react-router": "^5.1.20",
|
||||
"@types/socket.io": "^3.0.2",
|
||||
"connected-react-router": "^6.9.3",
|
||||
"framer-motion": "^7.4.0",
|
||||
"i18next": "^22.4.6",
|
||||
"i18next-browser-languagedetector": "^7.0.1",
|
||||
"i18next-http-backend": "^2.1.1",
|
||||
"js-cookie": "^3.0.1",
|
||||
"moment": "^2.29.4",
|
||||
"peer": "^0.6.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
||||
+6
-6
@@ -1,5 +1,5 @@
|
||||
import "./App.css";
|
||||
import 'styles/styles.css'
|
||||
import "styles/styles.css";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { Redirect, Route, Switch, useHistory } from "react-router-dom";
|
||||
@@ -7,11 +7,11 @@ import { Redirect, Route, Switch, useHistory } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import cookies from "js-cookie";
|
||||
|
||||
|
||||
import { Header } from "components/shared/Header/Header";
|
||||
import { Card } from "components/pages/Main/Card/Card";
|
||||
import { PopupComponent } from "components/pages/ConnectPage/PopupComponent/PopupComponent";
|
||||
import { PlayerComponent } from "components/pages/Stream/PlayerComponent/PlayerComponent";
|
||||
import { PlanComponent } from "components/pages/Plan/PlanComponent";
|
||||
|
||||
import { useAppDispatch, useAppSelector } from "hooks/redux";
|
||||
import { fetchCards } from "store/reducers/ActionCreator";
|
||||
@@ -20,7 +20,6 @@ import { languageSlice } from "store/reducers/languageSlice";
|
||||
import { ICards } from "models/ICards";
|
||||
|
||||
const App: React.FC = () => {
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
const history = useHistory();
|
||||
const { handleCurrentCard } = cardSlice.actions;
|
||||
@@ -32,9 +31,6 @@ const App: React.FC = () => {
|
||||
dispatch(handleChangeLanguage(cookies.get("i18next")));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
window.screen.orientation.lock("landscape");
|
||||
}, []);
|
||||
const handleCards = (card: ICards) => {
|
||||
dispatch(handleCurrentCard(card));
|
||||
history.push("/connect-page");
|
||||
@@ -74,6 +70,10 @@ const App: React.FC = () => {
|
||||
<Route exact path="/stream/:id">
|
||||
<PlayerComponent closeStream={closeStream}></PlayerComponent>
|
||||
</Route>
|
||||
<Route path="/plan">
|
||||
<Header></Header>
|
||||
<PlanComponent></PlanComponent>
|
||||
</Route>
|
||||
</Switch>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
<svg width="158" height="46" viewBox="0 0 158 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.4185 28.2237L27.7756 25.8035C26.7887 26.0609 25.8072 26.3338 24.8311 26.6222C24.3508 25.0028 23.8303 23.3976 23.2697 21.8068C20.5345 14.1008 16.8199 6.77268 12.2156 0L10.1248 1.39958C14.6103 7.99685 18.2283 15.1359 20.8907 22.6434C21.4441 24.2056 21.955 25.7815 22.4232 27.3711C18.1602 28.7491 13.9995 30.4214 9.97168 32.376L16.8926 18.5948L14.6379 17.4794L6.17355 34.3207C4.07608 35.454 2.01823 36.6658 0 37.9564L1.36689 40.0602C2.28536 39.4727 3.21345 38.9013 4.15113 38.346L0.959882 44.6968L3.21644 45.814L8.07892 36.1457C12.8901 33.5957 17.9164 31.4671 23.1004 29.7842C24.4945 35.0348 25.4254 40.396 25.8828 45.8069L28.4041 45.5941C27.9318 40.0028 26.9677 34.4633 25.5226 29.0388C26.4831 28.7552 27.4532 28.4859 28.4329 28.2309" fill="#F2F2F2"/>
|
||||
<path d="M125.712 28.2183H127.115V17.6616H125.712V28.2183ZM131.894 17.6616L127.318 22.7076L127.275 22.7487L127.322 22.7916L132.824 28.2129H134.612L129.017 22.6986L133.591 17.6562L131.894 17.6616Z" fill="#F2F2F2"/>
|
||||
<path d="M115.989 22.9526C115.984 21.8684 116.412 20.8264 117.18 20.0556C117.948 19.2847 118.994 18.8481 120.086 18.8414C121.02 18.8353 121.943 19.0375 122.787 19.4331V17.9477C121.923 17.6277 121.008 17.4654 120.086 17.4687C119.354 17.4555 118.626 17.5873 117.946 17.8564C117.266 18.1254 116.646 18.5262 116.124 19.0355C115.601 19.5448 115.186 20.1523 114.903 20.8225C114.62 21.4928 114.474 22.2123 114.474 22.9392C114.474 23.666 114.62 24.3855 114.903 25.0558C115.186 25.726 115.601 26.3335 116.124 26.8428C116.646 27.3521 117.266 27.7529 117.946 28.0219C118.626 28.291 119.354 28.4228 120.086 28.4096C121.008 28.4129 121.923 28.2506 122.787 27.9306V26.4631C121.943 26.8601 121.02 27.063 120.086 27.0565C118.994 27.0499 117.948 26.6132 117.18 25.8424C116.412 25.0715 115.984 24.0296 115.989 22.9454" fill="#F2F2F2"/>
|
||||
<path d="M44.3371 20.4106L46.201 24.2053H42.4713L44.3371 20.4106ZM39.0586 28.2181H40.4993L41.8572 25.4565H46.8169L48.173 28.2181H49.6138L44.3353 17.4756L39.0586 28.2181Z" fill="#F2F2F2"/>
|
||||
<path d="M60.3495 17.4726L52.7965 25.1801V17.6621H51.3936V28.4082L58.9448 20.7008V28.2188H60.3495V17.4726ZM60.9042 13.1613L60.2541 12.0889C58.3865 13.2127 56.8372 14.7891 55.7518 16.6701L56.8485 17.2903C57.8277 15.5945 59.2251 14.1737 60.9096 13.1613" fill="#F2F2F2"/>
|
||||
<path d="M101.841 22.9527C101.832 23.755 101.584 24.5367 101.129 25.1995C100.673 25.8624 100.03 26.3766 99.2809 26.6775C98.5315 26.9785 97.7091 27.0527 96.9174 26.8907C96.1256 26.7288 95.3998 26.3381 94.8313 25.7676C94.2628 25.1972 93.877 24.4726 93.7226 23.685C93.5681 22.8974 93.6518 22.0821 93.9632 21.3417C94.2746 20.6012 94.7997 19.9687 95.4725 19.5239C96.1452 19.079 96.9355 18.8416 97.7439 18.8415C98.8363 18.8482 99.8813 19.2848 100.65 20.0557C101.418 20.8265 101.846 21.8685 101.841 22.9527ZM103.255 22.9527C103.255 21.8704 102.932 20.8123 102.326 19.9123C101.721 19.0122 100.86 18.3107 99.8525 17.8963C98.8452 17.482 97.7366 17.3735 96.6671 17.5845C95.5976 17.7956 94.6152 18.3167 93.8441 19.082C93.073 19.8473 92.548 20.8224 92.3353 21.8839C92.1227 22.9454 92.232 24.0457 92.6495 25.0455C93.0669 26.0453 93.7738 26.8998 94.6806 27.5009C95.5874 28.1019 96.6535 28.4226 97.7439 28.4222C99.2055 28.4222 100.607 27.846 101.641 26.8202C102.674 25.7945 103.255 24.4033 103.255 22.9527Z" fill="#F2F2F2"/>
|
||||
<path d="M89.9872 20.3855C89.9872 18.7768 88.5879 17.472 86.8608 17.472C85.9714 17.4638 85.0897 17.6353 84.2693 17.976V19.3952L84.3629 19.3363C85.1039 18.9357 85.9381 18.736 86.7815 18.7571C87.8027 18.7571 88.6311 19.5186 88.6311 20.457C88.6311 21.3954 87.8027 22.1551 86.7815 22.1551H85.7892V23.4063H87.23C88.3231 23.4063 89.211 24.2303 89.211 25.2438C89.211 26.2572 88.2511 27.0813 87.0679 27.0813C85.7316 27.0813 84.5664 26.7023 83.9541 26.1446V27.6247C84.9012 28.1548 85.9735 28.425 87.0607 28.4076C89.0039 28.4076 90.5797 27.0634 90.5797 25.4028C90.5797 24.0855 89.8593 23.0792 88.8166 22.6538C89.1748 22.3913 89.4666 22.0498 89.6688 21.6561C89.8711 21.2624 89.9782 20.8274 89.9818 20.3855" fill="#F2F2F2"/>
|
||||
<path d="M69.5334 25.1866C69.5334 25.6591 69.3449 26.1124 69.0091 26.4474C68.6733 26.7823 68.2176 26.9717 67.7415 26.9741H64.9249V23.4135H67.7415C68.2176 23.4158 68.6733 23.6052 69.0091 23.9402C69.3449 24.2751 69.5334 24.7284 69.5334 25.2009V25.1866ZM68.379 20.5536C68.379 20.9835 68.2069 21.3959 67.9006 21.6999C67.5943 22.004 67.1788 22.1748 66.7456 22.1748H64.9249V18.9127H66.7456C67.1787 18.9132 67.5938 19.0841 67.9001 19.3881C68.2063 19.692 68.3785 20.1041 68.379 20.5339V20.5536ZM68.8905 22.5001C69.1686 22.2449 69.3908 21.9356 69.5432 21.5915C69.6956 21.2474 69.7751 20.8758 69.7765 20.4999C69.7765 18.9377 68.4186 17.6704 66.7456 17.6704H63.5273V28.2271H67.7469C69.4902 28.2074 70.8949 26.8865 70.8949 25.2581C70.8844 24.6513 70.6873 24.0621 70.3301 23.5695C69.9728 23.0769 69.4724 22.7044 68.8959 22.5019" fill="#F2F2F2"/>
|
||||
<path d="M157.447 17.4722L149.894 25.1796V17.6616H148.491V28.4078L156.042 20.7003V28.2183H157.447V17.4722ZM158 12.7086L156.905 12.0884C155.926 13.7842 154.528 15.205 152.844 16.2174L153.492 17.2898C155.36 16.166 156.909 14.5896 157.995 12.7086" fill="#F2F2F2"/>
|
||||
<path d="M77.2385 20.4106L79.1024 24.2053H75.3727L77.2385 20.4106ZM71.96 28.2181H73.4007L74.7568 25.4565H79.7165L81.0726 28.2181H82.5134L77.2349 17.4756L71.96 28.2181Z" fill="#F2F2F2"/>
|
||||
<path d="M111.686 25.1866C111.686 25.6607 111.496 26.1153 111.158 26.4505C110.821 26.7857 110.363 26.9741 109.885 26.9741H107.068V23.4135H109.885C110.363 23.4135 110.821 23.6018 111.158 23.937C111.496 24.2722 111.686 24.7269 111.686 25.2009V25.1866ZM110.53 20.5536C110.53 20.9835 110.358 21.3959 110.051 21.6999C109.745 22.004 109.329 22.1748 108.896 22.1748H107.075V18.9127H108.896C109.329 18.9132 109.744 19.0841 110.051 19.3881C110.357 19.692 110.529 20.1041 110.53 20.5339V20.5536ZM111.041 22.5001C111.319 22.2449 111.541 21.9356 111.694 21.5915C111.846 21.2474 111.926 20.8758 111.927 20.4999C111.927 18.9377 110.571 17.6704 108.896 17.6704H105.669V28.2271H109.888C111.632 28.2074 113.038 26.8865 113.038 25.2581C113.027 24.6511 112.83 24.0619 112.472 23.5693C112.115 23.0767 111.614 22.7043 111.037 22.5019" fill="#F2F2F2"/>
|
||||
<path d="M145.32 17.4722L137.769 25.1796V17.6616H136.364V28.4078L143.915 20.6985V28.2165H145.32V17.4722Z" fill="#F2F2F2"/>
|
||||
<path d="M51.6 35.25H50.1953V45.7959H51.6V35.25Z" fill="#F2F2F2"/>
|
||||
<path d="M61.9211 36.5012V35.25H54.0078V36.5012H57.2639V45.7959H58.6668V36.5012H61.9211Z" fill="#F2F2F2"/>
|
||||
<path d="M71.2448 35.2412L68.1094 39.8546H68.0968L64.9614 35.2412H63.3027L67.4016 41.272V45.7961H68.8045V41.272L72.9034 35.2412H71.2448Z" fill="#F2F2F2"/>
|
||||
<path d="M40.476 40.5234C40.4708 39.4392 40.8993 38.3972 41.6675 37.6264C42.4357 36.8555 43.4808 36.4189 44.5731 36.4122C45.5072 36.4053 46.4307 36.6082 47.2745 37.0057V35.5382C46.4106 35.218 45.4953 35.0557 44.5731 35.0591C43.1286 35.0851 41.752 35.6728 40.7397 36.6959C39.7274 37.719 39.1602 39.0956 39.1602 40.5296C39.1602 41.9636 39.7274 43.3402 40.7397 44.3633C41.752 45.3864 43.1286 45.9742 44.5731 46.0001C45.4953 46.0035 46.4106 45.8413 47.2745 45.5211V44.0446C46.4307 44.4421 45.5072 44.645 44.5731 44.6381C43.4809 44.631 42.4361 44.1941 41.668 43.4234C40.8999 42.6526 40.4713 41.611 40.476 40.5269" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
@@ -0,0 +1,46 @@
|
||||
.calender-container {
|
||||
width: 312px;
|
||||
}
|
||||
|
||||
.weekday-table {
|
||||
user-select: none;
|
||||
background: transparent;
|
||||
cursor: auto;
|
||||
padding: 3px 5px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 140%;
|
||||
color: #f2f2f2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.calendar-nav {
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-nav:hover {
|
||||
background: rgba(86, 126, 206, 0.2);
|
||||
}
|
||||
|
||||
.calendar-nav-left {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import "./CalendarComponent.css";
|
||||
import chevron from "images/icons/ChevronRight.svg";
|
||||
|
||||
import * as moment from "moment";
|
||||
import "moment/locale/ru";
|
||||
import { motion, useAnimationControls } from "framer-motion";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import { planSlice } from "store/reducers/planSlice";
|
||||
import { useAppDispatch, useAppSelector } from "hooks/redux";
|
||||
import { variantsCalendar } from "utils/animationProps.js";
|
||||
|
||||
export const CalendarComponent: React.FC<any> = ({ time, pickedTime }) => {
|
||||
const controls = useAnimationControls();
|
||||
const dispatch = useAppDispatch();
|
||||
const { handleNavigation, handleTimeValue } = planSlice.actions;
|
||||
|
||||
const [calendar, setCalendar] = useState([]);
|
||||
const [value, setValue] = useState(time);
|
||||
const currDate = time;
|
||||
const startDay = value.clone().startOf("month").startOf("week");
|
||||
const endDay = value.clone().endOf("month").endOf("week");
|
||||
const weekDays = ["ПН", "ВT", "СР", "ЧТ", "ПТ", "СБ", "ВС"];
|
||||
|
||||
useEffect(() => {
|
||||
controls.start({
|
||||
opacity: 1,
|
||||
});
|
||||
}, [nextMonth, prevMonth]);
|
||||
|
||||
useEffect(() => {
|
||||
const day = startDay.clone().subtract("1", "day");
|
||||
const a = [];
|
||||
while (day.isBefore(endDay, "day")) {
|
||||
a.push(
|
||||
Array(7)
|
||||
.fill(0)
|
||||
.map(() => day.add(1, "day").clone())
|
||||
);
|
||||
}
|
||||
setCalendar(a);
|
||||
}, [value]);
|
||||
|
||||
function prevMonth() {
|
||||
return value.clone().subtract(1, "month");
|
||||
}
|
||||
|
||||
function nextMonth() {
|
||||
return value.clone().add(1, "month").startOf("month");
|
||||
}
|
||||
|
||||
function thisMonth() {
|
||||
return value.isSame(new Date(), "month");
|
||||
}
|
||||
|
||||
function hide(day: any) {
|
||||
if (value.isSame(day, "month")) {
|
||||
if (currDate.isSame(day, "day")) {
|
||||
const cellClass = "calendar-cell_active calendar-cell";
|
||||
return cellClass;
|
||||
}
|
||||
return "calendar-cell calendar-cell_day";
|
||||
} else {
|
||||
return "calendar-cell-none";
|
||||
}
|
||||
}
|
||||
|
||||
const handleValue = (day: moment.Moment) => {
|
||||
const temp = currDate.clone().subtract(1, "day");
|
||||
if (day.isBefore(temp)) {
|
||||
return;
|
||||
} else {
|
||||
dispatch(
|
||||
handleNavigation({
|
||||
isDone: false,
|
||||
isCalendar: false,
|
||||
isTimepicker: true,
|
||||
isForm: false,
|
||||
})
|
||||
);
|
||||
dispatch(handleTimeValue(day));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="calendar-container">
|
||||
<h3 className="plan-title">Выберите дату.</h3>
|
||||
<div className="calendar">
|
||||
<div className="calendar-header">
|
||||
<img
|
||||
alt="prev-mouth"
|
||||
onClick={() => !thisMonth() && setValue(prevMonth())}
|
||||
className="calendar-nav calendar-nav-left"
|
||||
src={chevron}
|
||||
></img>
|
||||
<span className="calendar-date">
|
||||
{value.format("MMMM")}, {value.format("YYYY")}
|
||||
</span>
|
||||
<img
|
||||
alt="next-mouth"
|
||||
onClick={() => setValue(nextMonth())}
|
||||
className="calendar-nav"
|
||||
src={chevron}
|
||||
></img>
|
||||
</div>
|
||||
<div className="weekday-table">
|
||||
{weekDays.map((day, i) => (
|
||||
<div key={i} className="calendar-cell">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{calendar.map((week, i) => (
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={variantsCalendar}
|
||||
key={Math.random()}
|
||||
className="calendar-table"
|
||||
>
|
||||
{week.map((day: any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => handleValue(day)}
|
||||
className={hide(day)}
|
||||
>
|
||||
{day.format("D")}
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
.finish-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.finish-title {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 38px;
|
||||
line-height: 100%;
|
||||
/* or 38px */
|
||||
/* White */
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.finish-text {
|
||||
margin: 0;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 140%;
|
||||
color: #c5c7ce;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import "./Finish.css";
|
||||
|
||||
export const Finish: React.FC<any> = () => {
|
||||
return (
|
||||
<div className="finish-container">
|
||||
<h2 className="finish-title">Просмотр запланирован.</h2>
|
||||
<p className="finish-text">
|
||||
Ссылка для подключения и другая дополнительная информация будут
|
||||
отправлены на ваш почтовый адрес.
|
||||
</p>
|
||||
<button style={{ marginTop: "16px" }} className="button button-primary">
|
||||
На сайт жилого комплекса
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
background: #23242a;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
padding: 12px 16px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 135%;
|
||||
color: #c5c7ce;
|
||||
border: 10px solid transparent;
|
||||
border-image-slice: 1;
|
||||
border-width: 1px;
|
||||
|
||||
}
|
||||
|
||||
.form-input-caption {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
color: #c5c7ce;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-image-source: linear-gradient(180deg, #bc75ff 0%, #798fff 100%);
|
||||
}
|
||||
|
||||
.form-input:invalid {
|
||||
border: 1px solid #E94444;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import chevron from "images/icons/ChevronLeft.svg";
|
||||
import "./Form.css";
|
||||
|
||||
import { planSlice } from "store/reducers/planSlice";
|
||||
import { useAppDispatch, useAppSelector } from "hooks/redux";
|
||||
|
||||
export const Form: React.FC<any> = ({ time }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const { handleNavigation, handleTimeValue } = planSlice.actions;
|
||||
|
||||
const handleValue = (day: moment.Moment) => {
|
||||
dispatch(
|
||||
handleNavigation({
|
||||
isDone: false,
|
||||
isCalendar: false,
|
||||
isTimepicker: true,
|
||||
isForm: false,
|
||||
})
|
||||
);
|
||||
|
||||
dispatch(handleTimeValue(day));
|
||||
};
|
||||
|
||||
const handleReturn = () => {
|
||||
dispatch(
|
||||
handleNavigation({
|
||||
isDone: false,
|
||||
isCalendar: false,
|
||||
isTimepicker: true,
|
||||
isForm: false,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="calendar-container">
|
||||
<h3 className="plan-title plan-title-plan">
|
||||
Расскажите <br></br> о себе.
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => handleReturn()}
|
||||
style={{ width: "141px", padding: "4px 16px 4px 4px", height: "32px" }}
|
||||
className="button button-type-small button-plan"
|
||||
>
|
||||
<img src={chevron}></img>
|
||||
Выбор времени
|
||||
</button>
|
||||
<div className="calendar" style={{ height: "auto" }}>
|
||||
<div className="calendar-header">
|
||||
<span className="calendar-date">{time.format("DD MMM, LT")}</span>
|
||||
</div>
|
||||
<form className="form">
|
||||
<div className="form-input-container">
|
||||
<span className="form-input-caption">Имя</span>
|
||||
<input min={2} max={30} className="form-input" type="text"></input>
|
||||
</div>
|
||||
<div className="form-input-container">
|
||||
<span className="form-input-caption">E-mail</span>
|
||||
<input className="form-input" type="e-mail"></input>
|
||||
</div>
|
||||
<button
|
||||
style={{ marginTop: "32px" }}
|
||||
className="button button-primary"
|
||||
>
|
||||
Запланировать
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,145 @@
|
||||
.content-container-plan {
|
||||
height: 100vh;
|
||||
width: 428px;
|
||||
justify-content: center;
|
||||
padding: 24px 56px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
box-sizing: border-box;
|
||||
border-width: 0px 2px;
|
||||
border-style: solid;
|
||||
border-color: #23242a;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.calendar-position {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.plan-logo {
|
||||
width: 158px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 38px;
|
||||
line-height: 100%;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.calendar-date {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: #f2f2f2;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.calendar-table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.calendar-table:nth-child(odd) {
|
||||
background: #1c1d21;
|
||||
}
|
||||
|
||||
.calendar-cell {
|
||||
user-select: none;
|
||||
background: transparent;
|
||||
cursor: auto;
|
||||
padding: 3px 5px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 140%;
|
||||
color: #f2f2f2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.calendar-cell_day {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-cell_day:hover {
|
||||
background: #23242a;
|
||||
}
|
||||
|
||||
.calendar-cell-none {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.line-calendar {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.button-plan {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.plan-title-plan {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
.calendar-position {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 430px) {
|
||||
|
||||
|
||||
.content-container-plan {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.plan-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
margin-top: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 125%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
.calendar-position {
|
||||
top: 60%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import "./PlanComponent.css";
|
||||
import logo from "./Aivaz.svg";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import * as moment from "moment";
|
||||
import "moment/locale/ru";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
import { CalendarComponent } from "./CalendarComponent/CalendarComponent";
|
||||
import { TimepickerComponent } from "./TimepickerComponent/TimepickerComponent";
|
||||
import { Form } from "./Form/Form";
|
||||
|
||||
import { Finish } from "./Finish/Finish";
|
||||
import { useAppSelector } from "hooks/redux";
|
||||
import { popupAnimation } from "utils/animationProps";
|
||||
|
||||
export const PlanComponent: React.FC<any> = () => {
|
||||
const { isDone, isCalendar, isTimepicker, isForm, time } = useAppSelector(
|
||||
(state) => state.planReducer
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="content-container-plan">
|
||||
<img alt="logo" src={logo} className="plan-logo"></img>
|
||||
<div className="calendar-position">
|
||||
<AnimatePresence mode="wait">
|
||||
{isCalendar && (
|
||||
<motion.div
|
||||
style={{ height: "560px" }}
|
||||
key={1}
|
||||
variants={popupAnimation}
|
||||
initial={"hidden"}
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<CalendarComponent time={time}></CalendarComponent>
|
||||
</motion.div>
|
||||
)}
|
||||
{isTimepicker && (
|
||||
<motion.div
|
||||
style={{ height: "560px" }}
|
||||
key={2}
|
||||
variants={popupAnimation}
|
||||
initial={"hidden"}
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<TimepickerComponent time={time}></TimepickerComponent>
|
||||
</motion.div>
|
||||
)}
|
||||
{isForm && (
|
||||
<motion.div
|
||||
style={{ height: "560px" }}
|
||||
key={3}
|
||||
variants={popupAnimation}
|
||||
initial={"hidden"}
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<Form time={time}></Form>
|
||||
</motion.div>
|
||||
)}
|
||||
{isDone && (
|
||||
<motion.div
|
||||
style={{ height: "560px" }}
|
||||
key={4}
|
||||
variants={popupAnimation}
|
||||
initial={"hidden"}
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<Finish></Finish>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
{!isDone && (
|
||||
<>
|
||||
<div className="line line-calendar"></div>
|
||||
<button className="button button-type-small">
|
||||
На сайт жилого комплекса
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
.button-plan {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.plan-title-plan {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.timepicker-cell {
|
||||
padding: 9px 18px;
|
||||
width: 72px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.timepicker-cell:hover {
|
||||
background: #23242a;
|
||||
}
|
||||
|
||||
.timepicker-table {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.timepicker-table:nth-child(even) {
|
||||
background: #1c1d21;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import chevron from "images/icons/ChevronLeft.svg";
|
||||
import "./TimepickerComponent.css";
|
||||
|
||||
import { planSlice } from "store/reducers/planSlice";
|
||||
import { useAppDispatch, useAppSelector } from "hooks/redux";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export const TimepickerComponent: React.FC<any> = ({ time }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const { handleNavigation, handleTimeValue } = planSlice.actions;
|
||||
|
||||
const [timePicker, settimePicker] = useState([]);
|
||||
const startTime = time.clone().hours(8).minutes(0);
|
||||
const endTime = time.clone().hours(19).minutes(0);
|
||||
|
||||
useEffect(() => {
|
||||
const temp = startTime.clone().subtract("30", "minute");
|
||||
const a = [];
|
||||
while (temp.isBefore(endTime, "minute")) {
|
||||
a.push(
|
||||
Array(8)
|
||||
.fill(0)
|
||||
.map(() => temp.add(30, "minutes").clone())
|
||||
);
|
||||
}
|
||||
settimePicker(a);
|
||||
}, [time]);
|
||||
|
||||
const handleValue = (time: moment.Moment) => {
|
||||
dispatch(
|
||||
handleNavigation({
|
||||
isDone: false,
|
||||
isCalendar: false,
|
||||
isTimepicker: false,
|
||||
isForm: true,
|
||||
})
|
||||
);
|
||||
dispatch(handleTimeValue(time));
|
||||
};
|
||||
|
||||
const handleReturn = () => {
|
||||
dispatch(
|
||||
handleNavigation({
|
||||
isDone: false,
|
||||
isCalendar: true,
|
||||
isTimepicker: false,
|
||||
isForm: false,
|
||||
})
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="calendar-container">
|
||||
<h3 className="plan-title plan-title-plan">Выберите время.</h3>
|
||||
<button
|
||||
onClick={() => handleReturn()}
|
||||
style={{ width: "120px", padding: "4px 16px 4px 4px", height: "32px" }}
|
||||
className="button button-type-small button-plan"
|
||||
>
|
||||
<img src={chevron}></img>
|
||||
Выбор даты
|
||||
</button>
|
||||
<div className="calendar">
|
||||
<div className="calendar-header">
|
||||
<span className="calendar-date">{time.format("DD MMMM")}</span>
|
||||
</div>
|
||||
{timePicker.map((day, i) => (
|
||||
<div key={i} className="timepicker-table">
|
||||
{day.map((time: any, i: number) => (
|
||||
<div
|
||||
onClick={() => handleValue(time)}
|
||||
key={i}
|
||||
className="calendar-cell timepicker-cell"
|
||||
>
|
||||
{time.format("LT")}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 19L8 12L15 5" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 213 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.00002 19L16 12L9.00002 5" stroke="#F2F2F2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 224 B |
@@ -0,0 +1,50 @@
|
||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||
import { Moment } from "moment";
|
||||
import * as moment from "moment";
|
||||
import "moment/locale/ru";
|
||||
|
||||
interface IState {
|
||||
isCalendar: boolean;
|
||||
isTimepicker: boolean;
|
||||
isForm: boolean;
|
||||
isDone: boolean;
|
||||
}
|
||||
|
||||
export interface planState {
|
||||
time: Moment;
|
||||
isCalendar: boolean;
|
||||
isTimepicker: boolean;
|
||||
isForm: boolean;
|
||||
isDone: boolean;
|
||||
email: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const initialState: planState = {
|
||||
time: moment.default(),
|
||||
isCalendar: true,
|
||||
isTimepicker: false,
|
||||
isForm: false,
|
||||
isDone: false,
|
||||
email: "",
|
||||
name: "",
|
||||
};
|
||||
|
||||
export const planSlice = createSlice({
|
||||
name: "plan",
|
||||
initialState,
|
||||
reducers: {
|
||||
handleNavigation(state, action: PayloadAction<IState>) {
|
||||
state.isCalendar = action.payload.isCalendar;
|
||||
state.isDone = action.payload.isDone;
|
||||
state.isTimepicker = action.payload.isTimepicker;
|
||||
state.isForm = action.payload.isForm;
|
||||
},
|
||||
|
||||
handleTimeValue(state, action: PayloadAction<Moment>) {
|
||||
state.time = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default planSlice.reducer;
|
||||
+5
-1
@@ -1,18 +1,22 @@
|
||||
import { combineReducers, configureStore } from "@reduxjs/toolkit";
|
||||
|
||||
import cardReducer from "./reducers/cardSlice";
|
||||
import sessionReducer from "./reducers/sessionSlice";
|
||||
import languageReducer from "./reducers/languageSlice";
|
||||
|
||||
import planReducer from "./reducers/planSlice";
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
cardReducer,
|
||||
sessionReducer,
|
||||
languageReducer,
|
||||
planReducer,
|
||||
});
|
||||
|
||||
export const setupStore = () => {
|
||||
return configureStore({
|
||||
reducer: rootReducer,
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware({ serializableCheck: false }),
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -57,3 +57,23 @@
|
||||
color: #f2f2f2;
|
||||
background: #73788c;
|
||||
}
|
||||
|
||||
.button-type-small {
|
||||
transition: background 0.2s ease-in-out;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
color: #c5c7ce;
|
||||
background: #1c1d21;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.button-type-small:hover {
|
||||
transition: background 0.2s ease-in-out;
|
||||
|
||||
background: #23242a;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
@@ -13,6 +13,11 @@ export const animationButton = {
|
||||
},
|
||||
};
|
||||
|
||||
export const variantsCalendar = {
|
||||
visible: { opacity: 1, transition: { duration: 1, ease: "easeOut" } },
|
||||
hidden: { opacity: 0, transition: { duration: 1, ease: "easeOut" } },
|
||||
};
|
||||
|
||||
export const sidebarVariants = {
|
||||
open: { x: -1, transition: { ease: "easeIn" }, width: "60px" },
|
||||
closed: { x: "-50px", transition: { ease: "easeIn" }, width: "60px" },
|
||||
|
||||
Reference in New Issue
Block a user