|  |  |  | @ -1,14 +1,110 @@ | 
			
		
	
		
			
				
					|  |  |  |  | import React from 'react' | 
			
		
	
		
			
				
					|  |  |  |  | import { connect } from 'react-redux' | 
			
		
	
		
			
				
					|  |  |  |  | import React from "react"; | 
			
		
	
		
			
				
					|  |  |  |  | import { connect } from "react-redux"; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | export const Comments = (props) => { | 
			
		
	
		
			
				
					|  |  |  |  | //assets
 | 
			
		
	
		
			
				
					|  |  |  |  | import dialogImage from "./assets/dialog.svg"; | 
			
		
	
		
			
				
					|  |  |  |  | import ravinoImage from "./assets/ravino.svg"; | 
			
		
	
		
			
				
					|  |  |  |  | import danovinImage from "./assets/danovin.svg"; | 
			
		
	
		
			
				
					|  |  |  |  | import razgoshaImage from "./assets/razgosha.svg"; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | //components
 | 
			
		
	
		
			
				
					|  |  |  |  | import Button from "../../../../components/Button"; | 
			
		
	
		
			
				
					|  |  |  |  | import Avatar from "../../../../components/Avatar"; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | export const Comments = ({ | 
			
		
	
		
			
				
					|  |  |  |  |   comments = [ | 
			
		
	
		
			
				
					|  |  |  |  |     { | 
			
		
	
		
			
				
					|  |  |  |  |       logo: ravinoImage, | 
			
		
	
		
			
				
					|  |  |  |  |       message: | 
			
		
	
		
			
				
					|  |  |  |  |         "داستان بازی یک پلتفرم بسیار قدرتمند و نوظهور در عرصه سرگرم آموزی های جدیداست و انقلابی در این زمینه به وقوع پیوسته", | 
			
		
	
		
			
				
					|  |  |  |  |       user: { | 
			
		
	
		
			
				
					|  |  |  |  |         name: "مسعود حسنلو", | 
			
		
	
		
			
				
					|  |  |  |  |         avatar: null, | 
			
		
	
		
			
				
					|  |  |  |  |         title: "مدیرعامل شرکت راوینو", | 
			
		
	
		
			
				
					|  |  |  |  |       }, | 
			
		
	
		
			
				
					|  |  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |  |     { | 
			
		
	
		
			
				
					|  |  |  |  |       logo: danovinImage, | 
			
		
	
		
			
				
					|  |  |  |  |       message: | 
			
		
	
		
			
				
					|  |  |  |  |         "برای ما که در کار تولید محتوای خلافانه هستم و همیشه در رقاب هستیم این پلتفرم حکم یک معجزه را دارد", | 
			
		
	
		
			
				
					|  |  |  |  |       user: { | 
			
		
	
		
			
				
					|  |  |  |  |         name: "پدرام بیدگلی", | 
			
		
	
		
			
				
					|  |  |  |  |         avatar: null, | 
			
		
	
		
			
				
					|  |  |  |  |         title: "تولیدکننده محتوا", | 
			
		
	
		
			
				
					|  |  |  |  |       }, | 
			
		
	
		
			
				
					|  |  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |  |     { | 
			
		
	
		
			
				
					|  |  |  |  |       logo: razgoshaImage, | 
			
		
	
		
			
				
					|  |  |  |  |       message: | 
			
		
	
		
			
				
					|  |  |  |  |         "عبارت فوق العاده برای این پلتفرم کم است مشتریان ما در حوزه محتوای آموزشی با استفاده از این پلتفرم چند برابر شده اند", | 
			
		
	
		
			
				
					|  |  |  |  |       user: { | 
			
		
	
		
			
				
					|  |  |  |  |         name: "کامران هوشمند", | 
			
		
	
		
			
				
					|  |  |  |  |         avatar: null, | 
			
		
	
		
			
				
					|  |  |  |  |         title: "مدیر تولید محتوا جشنواره رازگشا", | 
			
		
	
		
			
				
					|  |  |  |  |       }, | 
			
		
	
		
			
				
					|  |  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |  |   ], | 
			
		
	
		
			
				
					|  |  |  |  | }) => { | 
			
		
	
		
			
				
					|  |  |  |  |   const Comment = React.useCallback( | 
			
		
	
		
			
				
					|  |  |  |  |     ({ comment }) => { | 
			
		
	
		
			
				
					|  |  |  |  |       return ( | 
			
		
	
		
			
				
					|  |  |  |  |         <div className="flex flex-col gap-6 w-1/4"> | 
			
		
	
		
			
				
					|  |  |  |  |           <img | 
			
		
	
		
			
				
					|  |  |  |  |             src={comment.logo} | 
			
		
	
		
			
				
					|  |  |  |  |             alt={comment.user.title} | 
			
		
	
		
			
				
					|  |  |  |  |             style={{ width: "8.02vw", height: "6.63vh" }} | 
			
		
	
		
			
				
					|  |  |  |  |           /> | 
			
		
	
		
			
				
					|  |  |  |  |           <p className="text-1x text-primary-1 font-2">{comment.message}</p> | 
			
		
	
		
			
				
					|  |  |  |  |           <div className="flex"> | 
			
		
	
		
			
				
					|  |  |  |  |             <Avatar size="3.40vw" rounded="rounded-full" /> | 
			
		
	
		
			
				
					|  |  |  |  |             <div className="flex flex-col mr-2 gap-0.5"> | 
			
		
	
		
			
				
					|  |  |  |  |               <span className="text-1x font-2 text-primary-1"> | 
			
		
	
		
			
				
					|  |  |  |  |                 {comment.user.name} | 
			
		
	
		
			
				
					|  |  |  |  |               </span> | 
			
		
	
		
			
				
					|  |  |  |  |               <span className="text-1x font-2 text-primary-1"> | 
			
		
	
		
			
				
					|  |  |  |  |                 {comment.user.title} | 
			
		
	
		
			
				
					|  |  |  |  |               </span> | 
			
		
	
		
			
				
					|  |  |  |  |             </div> | 
			
		
	
		
			
				
					|  |  |  |  |           </div> | 
			
		
	
		
			
				
					|  |  |  |  |         </div> | 
			
		
	
		
			
				
					|  |  |  |  |       ); | 
			
		
	
		
			
				
					|  |  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |  |     [comments] | 
			
		
	
		
			
				
					|  |  |  |  |   ); | 
			
		
	
		
			
				
					|  |  |  |  |   return ( | 
			
		
	
		
			
				
					|  |  |  |  |     <div></div> | 
			
		
	
		
			
				
					|  |  |  |  |   ) | 
			
		
	
		
			
				
					|  |  |  |  | } | 
			
		
	
		
			
				
					|  |  |  |  |     <section className="w-10/12 flex flex-col relative gap-10 divide-y divide-solid divide-gray-200 mb-36"> | 
			
		
	
		
			
				
					|  |  |  |  |       <div className="w-full flex justify-between items-center"> | 
			
		
	
		
			
				
					|  |  |  |  |         <div className="flex flex-col"> | 
			
		
	
		
			
				
					|  |  |  |  |           <strong className="text-primary-1 font-6 text-5x"> | 
			
		
	
		
			
				
					|  |  |  |  |             دیگران در مورد داستان بازی | 
			
		
	
		
			
				
					|  |  |  |  |             <br /> چه می گویند؟ | 
			
		
	
		
			
				
					|  |  |  |  |           </strong> | 
			
		
	
		
			
				
					|  |  |  |  |           <p className="text-primary-1 text-6xl font-3 text-2x my-6"> | 
			
		
	
		
			
				
					|  |  |  |  |             تجربه همکاران و مشتریان عزیزی که در کنار ما | 
			
		
	
		
			
				
					|  |  |  |  |             <br /> بودهاند و از خدمات ما استفاده میکنند | 
			
		
	
		
			
				
					|  |  |  |  |           </p> | 
			
		
	
		
			
				
					|  |  |  |  |           <Button | 
			
		
	
		
			
				
					|  |  |  |  |             title="نظرات بیشتری بخوانید" | 
			
		
	
		
			
				
					|  |  |  |  |             round="rounded-full" | 
			
		
	
		
			
				
					|  |  |  |  |             backgroundColor="bg-primary-1" | 
			
		
	
		
			
				
					|  |  |  |  |             color="text-white" | 
			
		
	
		
			
				
					|  |  |  |  |             padding="px-10 py-5" | 
			
		
	
		
			
				
					|  |  |  |  |             action={() => {}} | 
			
		
	
		
			
				
					|  |  |  |  |           /> | 
			
		
	
		
			
				
					|  |  |  |  |         </div> | 
			
		
	
		
			
				
					|  |  |  |  |         <img src={dialogImage} alt="دیالوگ" className="w-7/12" /> | 
			
		
	
		
			
				
					|  |  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |  |       <div className="w-full flex justify-between pt-12"> | 
			
		
	
		
			
				
					|  |  |  |  |         {comments.map((comment, index) => ( | 
			
		
	
		
			
				
					|  |  |  |  |           <Comment comment={comment} key={index} /> | 
			
		
	
		
			
				
					|  |  |  |  |         ))} | 
			
		
	
		
			
				
					|  |  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |  |     </section> | 
			
		
	
		
			
				
					|  |  |  |  |   ); | 
			
		
	
		
			
				
					|  |  |  |  | }; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | const mapStateToProps = (state) => ({}) | 
			
		
	
		
			
				
					|  |  |  |  | const mapStateToProps = (state) => ({}); | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | const mapDispatchToProps = {} | 
			
		
	
		
			
				
					|  |  |  |  | const mapDispatchToProps = {}; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | export default connect(mapStateToProps, mapDispatchToProps)(Comments) | 
			
		
	
		
			
				
					|  |  |  |  | export default connect(mapStateToProps, mapDispatchToProps)(Comments); | 
			
		
	
	
		
			
				
					|  |  |  | 
 |