Reza_ashrafi
3 years ago
parent
afbf0cb2b4
commit
8a98e53e4d
17 changed files with 333 additions and 16 deletions
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,22 @@ |
||||
import React from "react"; |
||||
|
||||
export default function Button({ |
||||
title, |
||||
backgroundColor, |
||||
color, |
||||
border, |
||||
width, |
||||
bgOpacity, |
||||
}) { |
||||
return ( |
||||
<button |
||||
className={`rounded-md py-3 justify-center text-xs ${backgroundColor} ${color} ${bgOpacity}`} |
||||
style={{ |
||||
border: `${border.width} solid ${border.color}`, |
||||
width: width, |
||||
}} |
||||
> |
||||
{title} |
||||
</button> |
||||
); |
||||
} |
||||
@ -0,0 +1,32 @@ |
||||
import React from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
import {connect} from 'react-redux'; |
||||
import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg"; |
||||
import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg"; |
||||
|
||||
function Header({ title, link, isDark }) { |
||||
return ( |
||||
<header className="w-full flex flex-row justify-between items-center pl-0"> |
||||
<strong className="text-blueC0 dark:text-white font-semibold text-sm"> |
||||
{title} |
||||
</strong> |
||||
<Link to={link}> |
||||
<img |
||||
src={isDark ? arrowWhiteIcon : arrowBlueIcon} |
||||
alt="" |
||||
className={`transform ${isDark ? "w-5" : "w-5 rotate-180"}`} |
||||
/> |
||||
</Link> |
||||
</header> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
isDark: state.publicApi.isDark |
||||
}) |
||||
|
||||
const mapDispatchToProps = { |
||||
|
||||
} |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Header); |
||||
@ -0,0 +1,16 @@ |
||||
import React, { useState } from "react"; |
||||
import StarRatingComponent from "react-star-rating-component"; |
||||
|
||||
function StarRating() { |
||||
const [rate, setRating] = useState(2); |
||||
return ( |
||||
<StarRatingComponent |
||||
name="rate1" |
||||
starCount={5} |
||||
value={rate} |
||||
onStarHover={(value) => setRating(value)} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
export default StarRating; |
||||
@ -0,0 +1,12 @@ |
||||
export {default as BG} from './BG'; |
||||
export {default as Button} from './Button'; |
||||
export {default as Dots} from './Dots'; |
||||
export {default as FloatWithMouse} from './FloatWidthMouse'; |
||||
export {default as JolPlayer} from './JolPlayer'; |
||||
export {default as Navbar} from './Navbar'; |
||||
export {default as Progress} from './Progress'; |
||||
export {default as Search} from './Search'; |
||||
export {default as Select} from './Select'; |
||||
// export {default as Wave} from './Wave';
|
||||
|
||||
|
||||
@ -0,0 +1,26 @@ |
||||
import React from "react"; |
||||
import userImage from "../../../assets/images/user.png"; |
||||
|
||||
function Comment({ comment }) { |
||||
return ( |
||||
<div className="flex flex-col py-3 px-2 rounded-sm border border-gray-200 border-solid dark:border-opacity-10 ml-4 w-auto" style={{minWidth: '250px'}}> |
||||
<header className="flex flex-row justify-between"> |
||||
<div className="flex flex-row items-center"> |
||||
<img src={userImage} alt="" className="h-10 w-10 rounded-full" /> |
||||
<strong className="text-blue5F text-md mr-1 dark:text-white">{comment?.name}</strong> |
||||
</div> |
||||
<div className=""></div> |
||||
</header> |
||||
<p className="text-xs text-gray70 mt-2 dark:text-white">{comment?.text}</p> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default Comment; |
||||
|
||||
Comment.defaultProps = { |
||||
comment: { |
||||
name: "سورنا عابدی", |
||||
text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ", |
||||
}, |
||||
}; |
||||
@ -0,0 +1,55 @@ |
||||
import React from "react"; |
||||
import StarRating from "../../../components/StarRating"; |
||||
import Progress from "../../../components/Progress"; |
||||
|
||||
function Rate({ avarage, all, fields }) { |
||||
return ( |
||||
<div className="w-full flex flex-row justify-between items-center mt-2"> |
||||
<div className="flex flex-col items-center justify-center h-full ml-4"> |
||||
<strong className="text-3xl text-blue5F mb-2 font-bold dark:text-white"> |
||||
{avarage} |
||||
</strong> |
||||
<StarRating /> |
||||
<span className="text-xs text-gray70 mt-2 dark:text-white">{all}</span> |
||||
</div> |
||||
<ul className="p-0 m-0 list-none flex flex-col flex-1"> |
||||
{fields.map((item, index) => ( |
||||
<li key={index} className="w-full flex flex-row-reverse items-center justify-between"> |
||||
<span className="mr-2 text-xs text-blue5F dark:text-white">{item.name}</span> |
||||
<Progress percent={item.percent} /> |
||||
<span className="ml-2 text-xs text-blue5F dark:text-white">{item.percent + "%"}</span> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default Rate; |
||||
|
||||
Rate.defaultProps = { |
||||
avarage: 4.8, |
||||
all: 4780, |
||||
fields: [ |
||||
{ |
||||
name: "5 ستاره", |
||||
percent: 50, |
||||
}, |
||||
{ |
||||
name: "4 ستاره", |
||||
percent: 50, |
||||
}, |
||||
{ |
||||
name: "3 ستاره", |
||||
percent: 50, |
||||
}, |
||||
{ |
||||
name: "2 ستاره", |
||||
percent: 50, |
||||
}, |
||||
{ |
||||
name: "1 ستاره", |
||||
percent: 50, |
||||
}, |
||||
], |
||||
}; |
||||
@ -0,0 +1,138 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { book } from "../../redux/actions"; |
||||
import location from "../../utils/location"; |
||||
import Button from "../../components/Button"; |
||||
import Header from "../../components/Header"; |
||||
import Comment from "./Comment"; |
||||
import Rate from "./Rate"; |
||||
|
||||
export const Product = ({ productType, getInfo, book, grades, isDark }) => { |
||||
useEffect(() => { |
||||
getInfo({ id: location.getId() }); |
||||
}, []); |
||||
return ( |
||||
<> |
||||
{/* Portrait */} |
||||
<div className="w-full flex flex-col bg-transparent px-4"> |
||||
<header |
||||
className={`w-full flex ${ |
||||
productType === "book" ? "flex-row" : "flex-col" |
||||
}`}
|
||||
> |
||||
<img |
||||
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`} |
||||
alt="" |
||||
className="w-5/12 rounded-md" |
||||
/> |
||||
<div className="flex flex-1 flex-col pr-2 pt-2"> |
||||
<h1 className="text-blue5F mb-3 font-semibold text-sm dark:text-white"> |
||||
{book?.name} |
||||
</h1> |
||||
<div className="text-blueC0 text-xs dark:text-greenBA"> |
||||
{"پایه" + " " + grades[book?.gradeId]} |
||||
</div> |
||||
</div> |
||||
</header> |
||||
<ul |
||||
className="list-none flex flex-row divide-x items-center mt-4" |
||||
style={{ direction: "ltr" }} |
||||
> |
||||
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white"> |
||||
{book?.pagesNum} <br /> صفحه |
||||
</li> |
||||
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white"> |
||||
{"فیزیکی - دیجیتالی"} <br /> در دسترس |
||||
</li> |
||||
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white"> |
||||
{book?.rate} <br /> امتیاز |
||||
</li> |
||||
</ul> |
||||
<h2 className="text-blueC0 text-sm font-light mt-5 dark:text-greenBA"> |
||||
نسخه محصول را انتخاب کنید |
||||
</h2> |
||||
<div className="w-full flex flex-row justify-between items-center mt-4"> |
||||
<Button |
||||
title="نسخه فیزیکی" |
||||
backgroundColor={isDark ? "bg-transparent" : "bg-white"} |
||||
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} |
||||
width="49%" |
||||
color={isDark ? "text-white" : "text-blueC0"} |
||||
/> |
||||
<Button |
||||
title="نسخه دیجیتال" |
||||
backgroundColor={isDark ? "bg-transparent" : "bg-white"} |
||||
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} |
||||
width="49%" |
||||
color={isDark ? "text-white" : "text-blueC0"} |
||||
/> |
||||
</div> |
||||
<div className="w-full flex flex-row justify-between items-center mt-4"> |
||||
<Button |
||||
title="خرید با قیمت 245.000 تومان" |
||||
backgroundColor="bg-blueC0" |
||||
border={{ color: "#196EC055", width: "1px" }} |
||||
width="65%" |
||||
color="text-white" |
||||
/> |
||||
<Button |
||||
title="مشاهده نمونه" |
||||
backgroundColor={isDark ? "bg-transparent" : "bg-white"} |
||||
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} |
||||
width="33%" |
||||
color={isDark ? "text-white" : "text-blueC0"} |
||||
/> |
||||
</div> |
||||
<div className="w-full flex flex-row justify-between items-center mt-4"> |
||||
<Button |
||||
title="مشاهده دوره ویدئویی این محصول" |
||||
backgroundColor="bg-blueC0" |
||||
border={{ color: "#196EC055", width: "0px" }} |
||||
bgOpacity="bg-opacity-10" |
||||
width="100%" |
||||
color={isDark ? "text-white" : "text-blueC0"} |
||||
/> |
||||
</div> |
||||
<div className="w-full flex flex-col justify-between items-center mt-4"> |
||||
<Header title="توضیحات" link="#" /> |
||||
<p className="text-xs text-gray1 mt-2 dark:text-white"> |
||||
خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ |
||||
ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ |
||||
ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ |
||||
ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ |
||||
ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ |
||||
ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ |
||||
ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ |
||||
ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "} |
||||
</p> |
||||
</div> |
||||
<div className="w-full flex flex-col justify-between items-center mt-4"> |
||||
<Header title="امتیازات و نظرات" link="#" /> |
||||
<Rate /> |
||||
</div> |
||||
<div |
||||
className="flex flex-row w-full pb-4 mt-6" |
||||
style={{ overflowX: "scroll" }} |
||||
> |
||||
{[0, 1, 2, 2].map((comment, index) => ( |
||||
<Comment key={index} /> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
book: state.book.info, |
||||
grades: state.publicApi.grades, |
||||
isDark: state.publicApi.isDark, |
||||
}); |
||||
|
||||
const mapDispatchToProps = { getInfo: book.info }; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Product); |
||||
|
||||
Product.defaultProps = { |
||||
productType: "book", |
||||
}; |
||||
Loading…
Reference in new issue