From f05e248c6413e2038f2730e5e8bacdd860ee100f Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Sun, 1 May 2022 16:24:45 +0430 Subject: [PATCH] reza fixed home screen --- package.json | 1 + src/assets/icons/next.svg | 8 + src/components/Slider/Slider.scss | 119 ------------ src/components/Slider/index.js | 172 ------------------ src/index.js | 1 + .../layouts/Samples/assets/grandFather.svg | 8 + .../Home/layouts/Samples/assets/pic1.svg | 11 ++ .../Home/layouts/Samples/assets/pic2.svg | 11 ++ .../Home/layouts/Samples/assets/pic3.svg | 11 ++ src/views/Home/layouts/Samples/index.js | 125 ++++++++++++- yarn.lock | 5 + 11 files changed, 177 insertions(+), 295 deletions(-) create mode 100644 src/assets/icons/next.svg delete mode 100644 src/components/Slider/Slider.scss delete mode 100644 src/components/Slider/index.js create mode 100644 src/views/Home/layouts/Samples/assets/grandFather.svg create mode 100644 src/views/Home/layouts/Samples/assets/pic1.svg create mode 100644 src/views/Home/layouts/Samples/assets/pic2.svg create mode 100644 src/views/Home/layouts/Samples/assets/pic3.svg diff --git a/package.json b/package.json index b6ed7e9..2485a98 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", + "@trendyol-js/react-carousel": "^2.0.1", "axios": "^0.27.1", "jalali-moment": "^3.3.11", "react": "^18.0.0", diff --git a/src/assets/icons/next.svg b/src/assets/icons/next.svg new file mode 100644 index 0000000..e17038f --- /dev/null +++ b/src/assets/icons/next.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Slider/Slider.scss b/src/components/Slider/Slider.scss deleted file mode 100644 index c72bfb9..0000000 --- a/src/components/Slider/Slider.scss +++ /dev/null @@ -1,119 +0,0 @@ - -.Slider{ - width: 100%; - height: 80vh; - overflow: hidden; - position: relative; - z-index: 4; - max-width: 1550px; - @media screen and (min-width: 1551px) { - margin: 0 auto; - } - - &-main-box { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - - &-title { - width: 80%; - margin: 0 auto; - font-size: 38px; - color: #fff; - font-family: Medium; - } - - &-item-container { - width: 80%; - margin: 0 auto; - margin-top: 20px; - display: flex; - align-items: center; - justify-content: space-between; - // direction: rtl; - - &-item { - width: 32%; - flex-shrink: 0; - aspect-ratio: 1/0.85; - border-radius: 21px; - background-color: rgba($color: #fff, $alpha: 0.1); - backdrop-filter: blur(10px); - box-sizing: border-box; - padding: 20px; - margin-right: 2%; - transition: all 1s; - - &-img-container { - width: 100%; - height: 70%; - // background-color: rgb(253, 57, 178); - } - - &-title { - font-size: 24px; - width: 100%; - margin-top: 10px; - font-family: Medium; - color: #0080ff; - } - - &-subtitle { - width: 100%; - font-size: 18px; - margin-top: 10px; - color: #fff; - font-family: Thin; - } - } - } - - &-slider-btns { - width: 80%; - margin: 0 auto; - margin-top: 30px; - display: flex; - align-items: center; - justify-content: space-between; - - &-previous { - display: flex; - align-items: center; - cursor: pointer; - color: #555; - - &-icon { - // color: #fff; - font-size: 25px; - margin-right: 10px; - } - - &-text { - font-size: 30px; - font-family: Thin; - // color: #fff; - } - } - - &-next { - display: flex; - align-items: center; - cursor: pointer; - - &-icon { - color: #fff; - font-size: 25px; - margin-left: 10px; - } - - &-text { - font-size: 30px; - font-family: Thin; - color: #fff; - } - } - } - } - } \ No newline at end of file diff --git a/src/components/Slider/index.js b/src/components/Slider/index.js deleted file mode 100644 index 379b068..0000000 --- a/src/components/Slider/index.js +++ /dev/null @@ -1,172 +0,0 @@ -import { useState } from "react"; -import './Slider.scss'; - -let p4SliderCounter = 0; -const Slider = () => { - const [hp4Data, setHp4Data] = useState([ - { - id: 101, - title: "Create Multi Platform", - subtitle: "Colored pencils were busy except", - title_fa: " ساخت نرم‌افزارهای چند پلتفرمه", - subtitle_fa: "متنی برای تست", - }, - { - id: 102, - title: "Gamify", - subtitle: "Colored pencils were busy except", - title_fa: "گیمیفای", - subtitle_fa: "متنی برای تست", - }, - { - id: 201, - title: "Web Design", - subtitle: "Colored pencils were busy except", - title_fa: "طراحی سایت", - subtitle_fa: "متنی برای تست", - }, - { - id: 202, - title: "PR & HR Software", - subtitle: "Colored pencils were busy except", - title_fa: "نرم‌افزارهای PR و HR", - subtitle_fa: "متنی برای تست", - }, - { - id: 301, - title: "Android & IOS", - subtitle: "Colored pencils were busy except", - title_fa: "نرم‌افزارهای android و ios", - subtitle_fa: "متنی برای تست", - }, - { - id: 302, - title: "AR Platform", - subtitle: "Colored pencils were busy except", - title_fa: " پلتفرم AR", - subtitle_fa: "متنی برای تست", - }, - ]); - - const p4SliderNextHandler = () => { - let slider = document.querySelectorAll( - ".Slider-main-box-item-container-item" - ); - document.querySelector( - ".Slider-main-box-slider-btns-previous" - ).style.color = "#fff"; - if (p4SliderCounter < 3) { - if (p4SliderCounter === 0) { - slider[0].style.transform = "translateX(-200%)"; - slider[1].style.transform = "translateX(-106.25%)"; - slider[2].style.transform = "translateX(-106.25%)"; - slider[3].style.transform = "translateX(-106.25%)"; - } else if (p4SliderCounter === 1) { - slider[1].style.transform = "translateX(-306.25%)"; - slider[2].style.transform = "translateX(-212.5%)"; - slider[3].style.transform = "translateX(-212.5%)"; - slider[4].style.transform = "translateX(-212.5%)"; - } else if (p4SliderCounter === 2) { - slider[2].style.transform = "translateX(-412.5%)"; - slider[3].style.transform = "translateX(-318.75%)"; - slider[4].style.transform = "translateX(-318.75%)"; - slider[5].style.transform = "translateX(-318.75%)"; - document.querySelector( - ".Slider-main-box-slider-btns-next-text" - ).style.color = "#555"; - document.querySelector( - ".Slider-main-box-slider-btns-next-icon" - ).style.color = "#555"; - } - p4SliderCounter++; - } - }; - - const p4SliderPreviousHandler = () => { - let slider = document.querySelectorAll( - ".Slider-main-box-item-container-item" - ); - document.querySelector( - ".Slider-main-box-slider-btns-next-text" - ).style.color = "#fff"; - document.querySelector( - ".Slider-main-box-slider-btns-next-icon" - ).style.color = "#fff"; - if (p4SliderCounter > 0) { - if (p4SliderCounter === 3) { - slider[5].style.transform = "translateX(100%)"; - slider[4].style.transform = "translateX(-212.5%)"; - slider[3].style.transform = "translateX(-212.5%)"; - slider[2].style.transform = "translateX(-212.5%)"; - } else if (p4SliderCounter === 2) { - slider[4].style.transform = "translateX(100%)"; - slider[3].style.transform = "translateX(-106.25%)"; - slider[2].style.transform = "translateX(-106.25%)"; - slider[1].style.transform = "translateX(-106.25%)"; - } else if (p4SliderCounter === 1) { - slider[3].style.transform = "translateX(100%)"; - slider[2].style.transform = "translateX(0%)"; - slider[1].style.transform = "translateX(0%)"; - slider[0].style.transform = "translateX(0%)"; - document.querySelector( - ".Slider-main-box-slider-btns-previous" - ).style.color = "#555"; - } - p4SliderCounter--; - } - }; - - return ( -
-
-
- {hp4Data.map((item, index) => ( -
2 ? { transform: "translateX(100%)" } : null} - > -
-
- {item.title_fa} -
-
- {item.subtitle_fa} -
-
- ))} -
-
-
- {/* */} -
- قبلی -
-
-
-
- بعدی -
- {/* */} -
-
-
-
- ); -}; - -export default Slider; \ No newline at end of file diff --git a/src/index.js b/src/index.js index abefd0a..f36c1ba 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; + ReactDOM.render( diff --git a/src/views/Home/layouts/Samples/assets/grandFather.svg b/src/views/Home/layouts/Samples/assets/grandFather.svg new file mode 100644 index 0000000..a350123 --- /dev/null +++ b/src/views/Home/layouts/Samples/assets/grandFather.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/views/Home/layouts/Samples/assets/pic1.svg b/src/views/Home/layouts/Samples/assets/pic1.svg new file mode 100644 index 0000000..4a2fd0a --- /dev/null +++ b/src/views/Home/layouts/Samples/assets/pic1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/views/Home/layouts/Samples/assets/pic2.svg b/src/views/Home/layouts/Samples/assets/pic2.svg new file mode 100644 index 0000000..ce39909 --- /dev/null +++ b/src/views/Home/layouts/Samples/assets/pic2.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/views/Home/layouts/Samples/assets/pic3.svg b/src/views/Home/layouts/Samples/assets/pic3.svg new file mode 100644 index 0000000..4d6be02 --- /dev/null +++ b/src/views/Home/layouts/Samples/assets/pic3.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/views/Home/layouts/Samples/index.js b/src/views/Home/layouts/Samples/index.js index cf51a56..1facf85 100644 --- a/src/views/Home/layouts/Samples/index.js +++ b/src/views/Home/layouts/Samples/index.js @@ -1,16 +1,29 @@ import React from "react"; import { connect } from "react-redux"; +import { Carousel } from "@trendyol-js/react-carousel"; //components import Button from "../../../../components/Button"; -import Slider from "../../../../components/Slider"; -export const Samples = ({}) => { +//assets +import grandFatherImage from "./assets/grandFather.svg"; +import pic1Image from "./assets/pic1.svg"; +import pic2Image from "./assets/pic2.svg"; +import pic3Image from "./assets/pic3.svg"; +import nextIcon from "../../../../assets/icons/next.svg"; + +export const Samples = ({ uselessProps }) => { const [activeProject, setActiveProject] = React.useState(null); + const [itemsToShow, setItemsToShow] = React.useState(4); const Info = () => { return ( -
+
آقا بزرگ @@ -35,6 +48,59 @@ export const Samples = ({}) => { ); }; + const items = React.useMemo(() => { + return [ + { + id: 0, + title: "آقا بزرگ", + image: grandFatherImage, + }, + { + id: 1, + title: "ایما", + image: pic1Image, + }, + { + id: 2, + title: "شهرخوبان", + image: pic2Image, + }, + { + id: 3, + title: "رمضان", + image: pic3Image, + }, + { + id: 4, + title: "ایما", + image: pic1Image, + }, + { + id: 5, + title: "شهرخوبان", + image: pic2Image, + }, + { + id: 5, + title: "رمضان", + image: pic3Image, + }, + ]; + }, [uselessProps]); + + const renderArrow = React.useCallback( + ({ type, onClick, isEdge }) => { + console.log(type); + // const pointer = type === consts.PREV ? "👈" : "👉"; + return ( + + ); + }, + [uselessProps] + ); + return (
@@ -45,7 +111,58 @@ export const Samples = ({}) => { در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید

- +
+ e.stopPropagation()} + /> + } + leftArrow={ + e.stopPropagation()} + /> + } + > + {items.map((item, index) => ( +
+ {item.title} e.preventDefault()} + /> + + {item.title} + +
+ ))} +
+
); diff --git a/yarn.lock b/yarn.lock index 884ce8a..dfa4cdf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1669,6 +1669,11 @@ resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw== +"@trendyol-js/react-carousel@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@trendyol-js/react-carousel/-/react-carousel-2.0.1.tgz#9f35f2a10ec14fa5f0e4e2dea415373e301200a1" + integrity sha512-MsLmHez6VnGBPId6W0IcZJb2VUXhlkNd1n4h2j0GxUFyW578UgHYeaLooyps81XIsshFMTKClBUhsyWK5Nw/Vg== + "@trysound/sax@0.2.0": version "0.2.0" resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"