diff --git a/@types/assets/index.d.ts b/@types/assets/index.d.ts new file mode 100644 index 0000000..6218df0 --- /dev/null +++ b/@types/assets/index.d.ts @@ -0,0 +1,4 @@ +declare module '*.png' { + const path: string; + export default path; +} diff --git a/package.json b/package.json index 68502b5..3413364 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "scripts": { "start": "webpack serve --mode=development", "build": "webpack --mode=development", - "dev": "webpack --mode=development --watch" + "dev": "webpack --mode=development --watch", + "lint": "eslint" }, "author": "", "license": "ISC", diff --git a/src/pages/home/banner/components/arrow.tsx b/src/pages/home/banner/components/arrow.tsx new file mode 100644 index 0000000..a7ac890 --- /dev/null +++ b/src/pages/home/banner/components/arrow.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +const Arrow = () => { + return ( + + + + + ); +}; + +export default Arrow; diff --git a/src/pages/home/banner/components/cubs/cubs.tsx b/src/pages/home/banner/components/cubs/cubs.tsx new file mode 100644 index 0000000..6e3b803 --- /dev/null +++ b/src/pages/home/banner/components/cubs/cubs.tsx @@ -0,0 +1,61 @@ +import React, { useEffect, useState } from 'react'; +import Arrow from '../arrow'; +import LrButton from '../lr-button/lrButton'; +import './styles.css'; +import FirstImg from '../../../../../images/img.png'; +import SecondImg from '../../../../../images/img_1.png'; + +enum CubItem { + FIRST = 0, + SECOND = 1, +} + +const getBackGround = (item: CubItem) => { + return item === CubItem.FIRST + ? `center / cover no-repeat url(${FirstImg}), #F8F8F8` + : `center / cover no-repeat url(${SecondImg}), #F8F8F8`; +}; + +let prevTime = new Date().getTime(); + +const Cubs = () => { + const [curIndex, setCurIndex] = useState(CubItem.FIRST); + + useEffect(() => { + const interval = setInterval(() => { + const newTime = new Date().getTime(); + console.log(`+${newTime - prevTime}`); + prevTime = newTime; + setCurIndex((prevIndex) => { + return prevIndex === CubItem.FIRST ? CubItem.SECOND : CubItem.FIRST; + }); + }, 3000); + + return () => { + clearInterval(interval); + }; + }, [curIndex]); + + const setFirst = () => setCurIndex(CubItem.FIRST); + const setSecond = () => setCurIndex(CubItem.SECOND); + + return ( +
+
+ +
+
+ +
+ ); +}; + +export default Cubs; diff --git a/src/pages/home/banner/components/cubs/styles.css b/src/pages/home/banner/components/cubs/styles.css new file mode 100644 index 0000000..361a5d7 --- /dev/null +++ b/src/pages/home/banner/components/cubs/styles.css @@ -0,0 +1,52 @@ +.hero-cubs { + display: flex; + flex-direction: column; + align-items: center; + justify-self: start; +} + +.hero-cubs .lr-button { + margin-top: 71px; +} + +.hero-cub1 { + position: relative; + width: 391px; + height: 394px; + border-radius: 25px; + background: center / cover no-repeat url('../../../../../images/img.png'), #F8F8F8; +} +.hero-cub1::after { + content: ''; + position: absolute; + z-index: -1; + width: 100%; + height: 100%; + border-radius: 25px; + background: center / cover no-repeat url('../../../../../images/img.png'), #F8F8F8; + transform: translateY(25px); + + filter: blur(83.7px); +} + +.hero-cub2 { + position: absolute; + top: 181px; + left: calc(100% + 38px); + width: 320px; + height: 322px; + border-radius: 25px; + background: center / cover no-repeat url('../../../../../images/img_1.png'), #F8F8F8; +} +.hero-cub2::after { + content: ''; + position: absolute; + z-index: -1; + width: 100%; + height: 100%; + border-radius: 25px; + background: center / cover no-repeat url('../../../../../images/img_1.png'), #F8F8F8; + transform: translateY(25px); + + filter: blur(83.7px); +} \ No newline at end of file diff --git a/src/pages/home/banner/components/lr-button/lrButton.tsx b/src/pages/home/banner/components/lr-button/lrButton.tsx new file mode 100644 index 0000000..c5868e2 --- /dev/null +++ b/src/pages/home/banner/components/lr-button/lrButton.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import './styles.css'; + +interface LrButtonProps { + /** + * События нажатия на левую кнопку + */ + onLeftClick?: () => void; + onRightClick?: () => void; +} + +const getColor = (enabled?: boolean) => (enabled ? '#23262F' : '#929292'); + +const LrButton = ({ onLeftClick, onRightClick }: LrButtonProps) => { + return ( +
+ +
+ +
+ ); +}; + +export default LrButton; diff --git a/src/pages/home/banner/components/lr-button/styles.css b/src/pages/home/banner/components/lr-button/styles.css new file mode 100644 index 0000000..479ff51 --- /dev/null +++ b/src/pages/home/banner/components/lr-button/styles.css @@ -0,0 +1,20 @@ +.lr-button { + width: 166px; + height: 69px; + box-shadow: 0px 43.12px 34.49px -25.87px #0F0F0F1F; + display: flex; + align-items: center; + background: #FCFCFD; + border-radius: 17.25px; +} +.lr-button button { + width: 100%; + border: none; + background: none; +} +.lr-button-delimiter { + width: 2px; + height: 25px; + background: #E6E8EC; + flex-shrink: 0; +} \ No newline at end of file diff --git a/src/pages/home/banner/arrow.tsx b/src/pages/home/banner/dots.tsx similarity index 99% rename from src/pages/home/banner/arrow.tsx rename to src/pages/home/banner/dots.tsx index 021a53f..789e2b1 100644 --- a/src/pages/home/banner/arrow.tsx +++ b/src/pages/home/banner/dots.tsx @@ -1,6 +1,6 @@ import React from 'react'; -export const arrowEl = ( +export const dots = ( { - return (
@@ -19,72 +19,8 @@ const Banner = () => {
-
-
- - - - -
-
-
- -
- -
-
- {arrowEl} + + {dots}
); diff --git a/src/pages/home/banner/style.css b/src/pages/home/banner/style.css index fbc7377..3c68201 100644 --- a/src/pages/home/banner/style.css +++ b/src/pages/home/banner/style.css @@ -47,48 +47,6 @@ gap: 23px; } -.hero-cub1 { - position: relative; - width: 391px; - height: 394px; - border-radius: 25px; - background: center / cover no-repeat url('../../../images/img.png'), #F8F8F8; -} -.hero-cub1::after { - content: ''; - position: absolute; - z-index: -1; - width: 100%; - height: 100%; - border-radius: 25px; - background: center / cover no-repeat url('../../../images/img.png'), #F8F8F8; - transform: translateY(25px); - - filter: blur(83.7px); -} - -.hero-cub2 { - position: absolute; - top: 181px; - left: calc(100% + 38px); - width: 320px; - height: 322px; - border-radius: 25px; - background: center / cover no-repeat url('../../../images/img_1.png'), #F8F8F8; -} -.hero-cub2::after { - content: ''; - position: absolute; - z-index: -1; - width: 100%; - height: 100%; - border-radius: 25px; - background: center / cover no-repeat url('../../../images/img_1.png'), #F8F8F8; - transform: translateY(25px); - - filter: blur(83.7px); -} - .cub1-arrow { position: absolute; left: calc(100% + 23px); @@ -102,14 +60,3 @@ right: 0; z-index: -1; } - -.hero-cubs { - display: flex; - flex-direction: column; - align-items: center; - justify-self: start; -} - -.hero-cubs .lr-button { - margin-top: 71px; -} \ No newline at end of file diff --git a/src/style.css b/src/style.css index fcc6b28..a3af14d 100644 --- a/src/style.css +++ b/src/style.css @@ -189,23 +189,4 @@ html { flex-shrink: 0; } -.lr-button { - width: 166px; - height: 69px; - box-shadow: 0px 43.12px 34.49px -25.87px #0F0F0F1F; - display: flex; - align-items: center; - background: #FCFCFD; - border-radius: 17.25px; -} -.lr-button button { - width: 100%; - border: none; - background: none; -} -.lr-button-delimiter { - width: 2px; - height: 25px; - background: #E6E8EC; - flex-shrink: 0; -} + diff --git a/tsconfig.json b/tsconfig.json index b22ac8b..9ca2986 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -32,7 +32,7 @@ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ - // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + "typeRoots": ["./node_modules/@types", "@types"], /* Specify multiple folders that act like './node_modules/@types'. */ // "types": [], /* Specify type package names to be included without being referenced in a source file. */ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ diff --git a/webpack.config.js b/webpack.config.js index e5cec5c..26256b2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,3 @@ -const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); @@ -19,6 +18,10 @@ module.exports = { }, module: { rules: [ + { + test: /\.png/, + type: 'asset/resource', + }, { test: /\.(ts|tsx)$/, exclude: /node_modules/,