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