parent
f0f1ee4fd1
commit
972912f961
14 changed files with 450 additions and 118 deletions
@ -1,113 +0,0 @@ |
||||
import React, { Component } from "react"; |
||||
import Navbar from "../../Home/Navbar/index"; |
||||
import Footer from "../../Home/Footer/index"; |
||||
|
||||
import book2 from "../../../assets/images/book2.png"; |
||||
|
||||
import './index.scss'; |
||||
export default class Sample extends Component { |
||||
render() { |
||||
const { product } = this.props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth > 1000 ? ( |
||||
<> |
||||
<div className="product-sample d-flex"> |
||||
<Navbar /> |
||||
</div> |
||||
<Footer /> |
||||
</> |
||||
) : null} |
||||
{window.innerWidth < 1000 ? ( |
||||
<> |
||||
<div className="mobile-product-sample d-flex flex-column"> |
||||
<Navbar /> |
||||
<header className="mobile-product-sample__header d-flex"> |
||||
<div className="mobile-product-sample__header--right d-flex"> |
||||
<img src={product.image} alt={product.title} /> |
||||
</div> |
||||
<div className="mobile-product-sample__header--left d-flex flex-column"> |
||||
<h1>{product.title}</h1> |
||||
<h2>{product.subTitle}</h2> |
||||
<div> |
||||
شما در حال مطالعه <strong>صفحه {product.sample.page}</strong> هستید. |
||||
</div> |
||||
<div> |
||||
پیشرفت شما در مطالعه کتاب به <span>{product.sample.percent} درصد</span> رسیده است. |
||||
</div> |
||||
</div> |
||||
</header> |
||||
</div> |
||||
</> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
|
||||
Sample.defaultProps = { |
||||
product: { |
||||
id: 1, |
||||
image: book2, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه ششم ابتدایی", |
||||
price: "39.000", |
||||
oldPrice: "59.000", |
||||
date: new Date(), |
||||
sample: { |
||||
page: 67, |
||||
percent: 60, |
||||
}, |
||||
abstraction: |
||||
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت", |
||||
modules: [ |
||||
"پک هدیه شامل یک عدد جلد سخت", |
||||
"عینک واقعیت مجازی", |
||||
"کارت گرافیک مناسب جهت اجرای بازی", |
||||
], |
||||
tips: [ |
||||
"پک هدیه شامل یک عدد جلد سخت", |
||||
"عینک واقعیت مجازی", |
||||
"کارت گرافیک مناسب جهت اجرای بازی", |
||||
], |
||||
description: |
||||
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت", |
||||
comments: [ |
||||
{ |
||||
id: 0, |
||||
username: "محمدرضا", |
||||
date: new Date(), |
||||
text: "عالی بود. ممنون از سایت زیباتون", |
||||
score: 4, |
||||
}, |
||||
{ |
||||
id: 1, |
||||
username: "محمدرضا", |
||||
date: new Date(), |
||||
text: "عالی بود. ممنون از سایت زیباتون", |
||||
score: 2.5, |
||||
}, |
||||
{ |
||||
id: 2, |
||||
username: "محمدرضا", |
||||
date: new Date(), |
||||
text: "عالی بود. ممنون از سایت زیباتون", |
||||
score: 5, |
||||
}, |
||||
{ |
||||
id: 3, |
||||
username: "محمدرضا", |
||||
date: new Date(), |
||||
text: "عالی بود. ممنون از سایت زیباتون", |
||||
score: 3.7, |
||||
}, |
||||
{ |
||||
id: 4, |
||||
username: "محمدرضا", |
||||
date: new Date(), |
||||
text: "عالی بود. ممنون از سایت زیباتون", |
||||
score: 2, |
||||
}, |
||||
], |
||||
}, |
||||
}; |
||||
@ -0,0 +1,32 @@ |
||||
import React from 'react'; |
||||
|
||||
import './index.scss'; |
||||
export default function Links(props){ |
||||
return( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
<div className="links-box d-flex flex-column">
|
||||
<h2>{props.data.title}</h2> |
||||
</div> : null |
||||
} |
||||
{ |
||||
window.innerWidth < 1000 ?
|
||||
<div className="mobile-links-box d-flex flex-column">
|
||||
<h2><span></span>لینکها</h2> |
||||
<ul> |
||||
{props.data.links.map((item,i) => ( |
||||
<Item data={item} key={i} /> |
||||
) )} |
||||
</ul> |
||||
</div> : null |
||||
}
|
||||
</> |
||||
); |
||||
} |
||||
|
||||
const Item = (props) => { |
||||
return( |
||||
<li><a href={props.data.link}>{props.data.title}</a></li> |
||||
); |
||||
} |
||||
@ -0,0 +1,34 @@ |
||||
.mobile-links-box{ |
||||
width: 100%; |
||||
border-radius: 10px; |
||||
background-color: #fffac948; |
||||
margin: 15px 0px; |
||||
text-decoration: none; |
||||
padding: 20px 10px; |
||||
h2{ |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 32); |
||||
color: #72891edc; |
||||
padding: 5px; |
||||
span{ |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
background-color: #72891e; |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
ul{ |
||||
padding: 0px; |
||||
margin: 0px; |
||||
list-style: none; |
||||
padding-right: 15px; |
||||
li{ |
||||
font-size: calc(100vw / 30); |
||||
a{ |
||||
text-decoration: none; |
||||
color: #72891e; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
import React from 'react'; |
||||
|
||||
import './index.scss'; |
||||
export default function PDF(props){ |
||||
return( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
<div className="pdf-box d-flex flex-column">
|
||||
<h2>{props.data.title}</h2> |
||||
</div> : null |
||||
} |
||||
{ |
||||
window.innerWidth < 1000 ?
|
||||
<a href={props.data.file} download className="mobile-pdf-box d-flex flex-column">
|
||||
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2> |
||||
<div></div> |
||||
</a> : null |
||||
}
|
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,23 @@ |
||||
.mobile-pdf-box{ |
||||
width: 100%; |
||||
border-radius: 10px; |
||||
background-color:#ffa9a91e; |
||||
margin: 15px 0px; |
||||
text-decoration: none; |
||||
height: calc(100vh / 9); |
||||
padding: 20px 10px; |
||||
h2{ |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 32); |
||||
color: #FF0808; |
||||
padding: 5px; |
||||
span{ |
||||
width: 7px; |
||||
height: 7px; |
||||
border-radius: 50%; |
||||
background-color: #ffa9a925; |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
import React from 'react'; |
||||
|
||||
import './index.scss'; |
||||
export default function PowerPoint(props){ |
||||
return( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
<div className="ppt-box d-flex flex-column">
|
||||
<h2>{props.data.title}</h2> |
||||
</div> : null |
||||
} |
||||
{ |
||||
window.innerWidth < 1000 ?
|
||||
<a href={props.data.file} download className="mobile-ppt-box d-flex flex-column">
|
||||
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2> |
||||
<div></div> |
||||
</a> : null |
||||
}
|
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,23 @@ |
||||
.mobile-ppt-box{ |
||||
width: 100%; |
||||
border-radius: 10px; |
||||
background-color : #8dfaf61f; |
||||
margin: 15px 0px; |
||||
text-decoration: none; |
||||
height: calc(100vh / 9); |
||||
padding: 20px 10px; |
||||
h2{ |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 32); |
||||
color: #0D9189; |
||||
padding: 5px; |
||||
span{ |
||||
width: 7px; |
||||
height: 7px; |
||||
border-radius: 50%; |
||||
background-color: #0D9189; |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
import React from 'react'; |
||||
|
||||
import './index.scss'; |
||||
export default function VideoBox(props){ |
||||
return( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
<div className="video-box d-flex flex-column">
|
||||
<h2>{props.data.title}</h2> |
||||
</div> : null |
||||
} |
||||
{ |
||||
window.innerWidth < 1000 ?
|
||||
<div className="mobile-video-box d-flex flex-column">
|
||||
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2> |
||||
<div></div> |
||||
</div> : null |
||||
}
|
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
.mobile-video-box{ |
||||
width: 100%; |
||||
border-radius: 10px; |
||||
background-color: #eee; |
||||
margin: 15px 0px; |
||||
height: calc(100vh / 4); |
||||
position: relative; |
||||
h2{ |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 35); |
||||
color: #02733C; |
||||
padding: 5px; |
||||
background-color: #FFFFFF; |
||||
color: #4D4D4F; |
||||
position: absolute; |
||||
right: 10px; |
||||
top: 20px; |
||||
} |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
import React from 'react'; |
||||
|
||||
import './index.scss'; |
||||
export default function VoiceBox(props){ |
||||
return( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
<div className="voice-box d-flex flex-column">
|
||||
<h2>{props.data.title}</h2> |
||||
</div> : null |
||||
} |
||||
{ |
||||
window.innerWidth < 1000 ?
|
||||
<div className="mobile-voice-box d-flex flex-column">
|
||||
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2> |
||||
<div></div> |
||||
</div> : null |
||||
}
|
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
.mobile-voice-box{ |
||||
width: 100%; |
||||
border-radius: 10px; |
||||
background-color: #8dfac541; |
||||
padding: 10px 10px; |
||||
margin: 15px 0px; |
||||
h2{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 40); |
||||
color: #02733C; |
||||
span{ |
||||
width: 7px; |
||||
height: 7px; |
||||
border-radius: 50%; |
||||
background-color: #00CC69; |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
div{ |
||||
width: 100%; |
||||
height: 40px; |
||||
background-color: #02733C; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue