You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

380 lines
14 KiB

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Footer from "../Home/Footer/index";
import Navbar from "../Home/Navbar/index";
import Comment from "./Comment/index";
import Breadcrumbs from "./BreadCrumb/index";
import Gallery from "./Gallery/index";
import Info from "./Info/index";
import AddToCart from "./AddToCart/index";
import HomeScroll from "../Home/HomeScroll/index";
import HomeSlider from "../Home/HomeSlider/index";
import sciense_7 from "~/assets/images/sciense-7.png";
import sciense_6 from "~/assets/images/sciense-6.png";
import sciense_8 from "~/assets/images/sciense-8.png";
import sciense_9 from "~/assets/images/sciense-9.png";
import zist_10 from "~/assets/images/zist-10.png";
import film from "~/assets/Video/film.mp4";
import product_shipping from "~/assets/icons/product-shipping.png";
import product_cash_back from "~/assets/icons/product-cash-back.png";
import product_support from "~/assets/icons/product-support.png";
import send_comment from "~/assets/icons/send-comment.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18,
h2: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 24,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26,
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26,
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 29,
},
};
export default class Product extends Component {
render() {
const { product, sameProducts, supportItems } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="product d-flex flex-column">
<Navbar />
<Breadcrumbs />
<header className="product__header d-flex mt-4">
<Gallery gallery={product.gallery} />
<Info
subTitle={product.subTitle}
title={product.title}
description={product.description}
/>
<AddToCart
supportItems={supportItems}
price={product.price}
off={product.off}
/>
</header>
<div className="product__comments d-flex flex-column">
<div className="d-flex justify-content-between">
<h3 style={{ fontSize: fontSize.desktop.h1 }}>
نظرات خریداران
</h3>
<button>
ارسال نظر
<img src={send_comment} alt="ارسال نظر" />
</button>
</div>
<div className="product__comments--list d-flex flex-column">
<Comment comment={product.comments[0]} />
</div>
</div>
<Identifier item={sameProducts} />
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-product d-flex flex-column">
<Navbar />
<header className="mobile-product__header d-flex flex-column align-items-center">
<img src={product.image} alt={product.title} />
<h1 style={{ fontSize: fontSize.mobile.h1 }}>
{product.title}
</h1>
<h2 style={{ fontSize: fontSize.mobile.h2 }}>
{product.subTitle}
</h2>
<div className="d-flex flex-column mt-3">
<div className="d-flex">
<Link
to={`/products/${product.id}/sample`}
className="mobile-product__header--digitalButton"
style={{ fontSize: fontSize.mobile.a }}
>
خرید نسخه دیجیتال
</Link>
<Link
to={`/products/${product.id}/sample`}
className="mobile-product__header--purchase"
style={{ fontSize: fontSize.mobile.a }}
>
خرید نسخه چاپی
</Link>
</div>
<Link
to={`/products/${product.id}/sample`}
className="mobile-product__header--sampleButton"
style={{ fontSize: fontSize.mobile.a }}
>
مطالعه نمونه کتاب
</Link>
</div>
</header>
<div className="mobile-product__abstraction d-flex flex-column">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>خلاصه کتاب</h3>
<p style={{ fontSize: fontSize.mobile.p }}>
{product.abstraction}
</p>
</div>
<div className="mobile-product__modules d-flex flex-column">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>
این کتاب شامل چه مواردی است؟
</h3>
<ul>
{product.modules.map((item, i) => (
<React.Fragment key={i}>
<Item item={item} />
</React.Fragment>
))}
</ul>
</div>
<div className="mobile-product__tips d-flex flex-column">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>
نکاتی که هنگام خرید باید به آن توجه داشته باشید؟
</h3>
<ul>
{product.tips.map((item, i) => (
<React.Fragment key={i}>
<Item item={item} />
</React.Fragment>
))}
</ul>
</div>
<div className="mobile-product__description d-flex">
<p style={{ fontSize: fontSize.mobile.p }}>
{product.description}
</p>
</div>
<div className="mobile-product__comments d-flex flex-column">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>نظرات خریداران</h3>
<div className="mobile-product__comments--list d-flex">
{product.comments.map((item, i) => (
<Comment comment={item} key={i} />
))}
</div>
</div>
</div>
</>
) : null}
</>
);
}
}
Product.defaultProps = {
supportItems: [
{ title: "ارسال رایگان", icon: product_shipping },
{ title: "پشتیبانی 24 ساعته ", icon: product_support },
{ title: "ضمانت بازگشت ", icon: product_cash_back },
],
sameProducts: {
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "محصولات مرتبط",
moreText: "لیست کتابها",
height: window.innerWidth > 1000 ? 470 : 320,
design: window.innerWidth > 1000 ? "simple" : "product",
number: window.innerWidth > 1000 ? 4 : 2.8,
data: [
{
id: 0,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 1,
image: sciense_7,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 2,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
},
{
id: 3,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
},
{
id: 4,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
},
{
id: 5,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 6,
image: sciense_7,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 7,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
date: new Date(),
},
{
id: 8,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
date: new Date(),
},
{
id: 9,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
date: new Date(),
},
],
},
product: {
id: 1,
image: sciense_7,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
off: "30%",
oldPrice: "59.000",
date: new Date(),
abstraction:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
modules: [
"پک هدیه شامل یک عدد جلد سخت",
"عینک واقعیت مجازی",
"کارت گرافیک مناسب جهت اجرای بازی",
],
tips: [
"پک هدیه شامل یک عدد جلد سخت",
"عینک واقعیت مجازی",
"کارت گرافیک مناسب جهت اجرای بازی",
],
gallery: [
{ id: 0, value: film, type: "film" },
{ id: 1, value: sciense_6, type: "image" },
{ id: 2, value: sciense_7, type: "image" },
{ value: sciense_8, type: "image" },
],
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
comments: [
{
id: 0,
username: "محمدرضا",
date: new Date(),
text: "عالی بود. ممنون از سایت زیباتون",
score: 4,
reply: "ممنون از شما که به ما اعتماد کردید",
},
{
id: 1,
username: "محمدرضا",
date: new Date(),
text: "عالی بود. ممنون از سایت زیباتون",
score: 2.5,
reply: "",
},
{
id: 2,
username: "محمدرضا",
date: new Date(),
text: "عالی بود. ممنون از سایت زیباتون",
score: 5,
reply: "",
},
{
id: 3,
username: "محمدرضا",
date: new Date(),
text: "عالی بود. ممنون از سایت زیباتون",
score: 3.7,
reply: "",
},
{
id: 4,
username: "محمدرضا",
date: new Date(),
text: "عالی بود. ممنون از سایت زیباتون",
score: 2,
reply: "",
},
],
},
};
const Item = (props) => {
return <li style={{ fontSize: fontSize.mobile.li }}>+ {props.item}</li>;
};
const Identifier = (props) => {
return (
<>
{props.item.type === "scroll" ? (
<HomeScroll
number={props.item.number}
height={props.item.height}
title={props.item.title}
data={props.item.data}
designType={props.item.design}
moreText={props.item.moreText}
/>
) : null}
{props.item.type === "slider" ? (
<HomeSlider
designType={props.item.design}
number={props.item.number}
height={props.item.height}
title={props.item.title}
data={props.item.data}
/>
) : null}
</>
);
};