reza fixed home screen

master
Reza_ashrafi 2 years ago
parent fb00a64063
commit f05e248c64
  1. 1
      package.json
  2. 8
      src/assets/icons/next.svg
  3. 119
      src/components/Slider/Slider.scss
  4. 172
      src/components/Slider/index.js
  5. 1
      src/index.js
  6. 8
      src/views/Home/layouts/Samples/assets/grandFather.svg
  7. 11
      src/views/Home/layouts/Samples/assets/pic1.svg
  8. 11
      src/views/Home/layouts/Samples/assets/pic2.svg
  9. 11
      src/views/Home/layouts/Samples/assets/pic3.svg
  10. 125
      src/views/Home/layouts/Samples/index.js
  11. 5
      yarn.lock

@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1", "@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"@trendyol-js/react-carousel": "^2.0.1",
"axios": "^0.27.1", "axios": "^0.27.1",
"jalali-moment": "^3.3.11", "jalali-moment": "^3.3.11",
"react": "^18.0.0", "react": "^18.0.0",

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="60.166" height="60.166" viewBox="0 0 60.166 60.166">
<g id="vuesax_bold_arrow-right" data-name="vuesax/bold/arrow-right" transform="translate(-300 -252)">
<g id="arrow-right" transform="translate(300 252)">
<path id="Vector" d="M17.6,13.768,12.66,8.829,4.613.782A2.713,2.713,0,0,0,0,2.712V32.394A2.7,2.7,0,0,0,4.613,34.3L17.6,21.313A5.341,5.341,0,0,0,17.6,13.768Z" transform="translate(20.506 12.53)" fill="#426aee"/>
<path id="Vector-2" data-name="Vector" d="M0,0H60.166V60.166H0Z" transform="translate(60.166 60.166) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 646 B

@ -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;
}
}
}
}
}

@ -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 (
<div className="Slider bg-black ltr">
<div className="Slider-main-box ltr">
<div className="Slider-main-box-item-container ltr">
{hp4Data.map((item, index) => (
<div
key={item.id}
className="Slider-main-box-item-container-item"
style={index > 2 ? { transform: "translateX(100%)" } : null}
>
<div className="Slider-main-box-item-container-item-img-container ltr"></div>
<div
className="Slider-main-box-item-container-item-title"
style={{ direction: "rtl" }}
>
{item.title_fa}
</div>
<div
className="Slider-main-box-item-container-item-subtitle"
style={{ direction: "rtl" }}
>
{item.subtitle_fa}
</div>
</div>
))}
</div>
<div className="Slider-main-box-slider-btns">
<div
className="Slider-main-box-slider-btns-previous bg-red-400"
onClick={p4SliderPreviousHandler}
// style={p4SliderCounter === 0 ? { color:"#555" } : null}
>
{/* <BsArrowLeft className="Slider-main-box-slider-btns-previous-icon" /> */}
<div className="Slider-main-box-slider-btns-previous-text">
قبلی
</div>
</div>
<div
className="Slider-main-box-slider-btns-next"
onClick={p4SliderNextHandler}
// style={p4SliderCounter === 3 ? { filter: "grayscale(100%)" } : null}
>
<div className="Slider-main-box-slider-btns-next-text">
بعدی
</div>
{/* <BsArrowRight className="Slider-main-box-slider-btns-next-icon" /> */}
</div>
</div>
</div>
</div>
);
};
export default Slider;

@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import App from './App'; import App from './App';
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 364 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 20 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 89 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 43 KiB

@ -1,16 +1,29 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Carousel } from "@trendyol-js/react-carousel";
//components //components
import Button from "../../../../components/Button"; 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 [activeProject, setActiveProject] = React.useState(null);
const [itemsToShow, setItemsToShow] = React.useState(4);
const Info = () => { const Info = () => {
return ( return (
<div className="flex justify-between border border-solid border-primary-5 rounded-lg px-7 py-16 w-11/12 mt-10"> <div
className="flex justify-between border border-solid border-primary-5 rounded-lg px-7 py-16 mt-10"
style={{
width : `calc(100% - (100vw / 12 * 10 / ${itemsToShow * 10} * 2))`
}}
>
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1">
<strong className="text-primary-4 font-4 text-2x"> <strong className="text-primary-4 font-4 text-2x">
آقا بزرگ آقا بزرگ
@ -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 (
<button onClick={onClick} disabled={isEdge}>
arrow
</button>
);
},
[uselessProps]
);
return ( return (
<div className="w-10/12 h-screen flex flex-col justify-around items-center py-5 relative"> <div className="w-10/12 h-screen flex flex-col justify-around items-center py-5 relative">
<div className="flex flex-col mb-32"> <div className="flex flex-col mb-32">
@ -45,7 +111,58 @@ export const Samples = ({}) => {
در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید
</p> </p>
</div> </div>
<Slider /> <div className="relative w-full" style={{ direction: "ltr" }}>
<Carousel
className="flex"
show={itemsToShow}
useArrowKeys={true}
swiping={true}
rightArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-0"
src={nextIcon}
alt=""
// onClick={(e) => e.stopPropagation()}
/>
}
leftArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-16 cursor-pointer rotate-180 p-2 -left-3"
src={nextIcon}
alt=""
// onClick={(e) => e.stopPropagation()}
/>
}
>
{items.map((item, index) => (
<article
className="flex flex-col gap-4"
key={index}
style={{
direction: "rtl",
padding: `16px calc(100vw / 12 * 10 / ${itemsToShow * 10})`,
}}
>
<img
src={item.image}
alt={item.title}
className={`rounded-lg ${
activeProject === index
? "border border-solid border-primary-4"
: "shadow-lg"
}`}
style={{
width: `calc(100vw / 10 * 12 / ${itemsToShow})`,
}}
onDragStart={(e) => e.preventDefault()}
/>
<strong className="text-1x text-primary-4 font-4">
{item.title}
</strong>
</article>
))}
</Carousel>
</div>
<Info /> <Info />
</div> </div>
); );

@ -1669,6 +1669,11 @@
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw== 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": "@trysound/sax@0.2.0":
version "0.2.0" version "0.2.0"
resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"

Loading…
Cancel
Save