| @ -0,0 +1,52 @@ | |||||||
|  | import React from "react"; | ||||||
|  | 
 | ||||||
|  | const AdvertisementDesign1 = () => { | ||||||
|  |   return ( | ||||||
|  |     <section className="mx-auto bg-white m-10 w-full sm:w-8/12 md:w-5/12 lg:w-3/12"> | ||||||
|  |       <div | ||||||
|  |         className="w-full h-96 rounded-3xl relative overflow-hidden" | ||||||
|  |         style={{ backgroundColor: "#E3F2FF" }} | ||||||
|  |       > | ||||||
|  |         <div | ||||||
|  |           style={{ | ||||||
|  |             width: "calc(100vw / 10)", | ||||||
|  |             height: "calc(100vw / 10)", | ||||||
|  |             left: "20%", | ||||||
|  |             top: "15%", | ||||||
|  |           }} | ||||||
|  |           className="rounded-full absolute bg-blue-200 bg-opacity-30 backdrop-filter backdrop-blur-md z-30" | ||||||
|  |         ></div> | ||||||
|  |         <div | ||||||
|  |           style={{ | ||||||
|  |             width: "calc(100vw / 7)", | ||||||
|  |             height: "calc(100vw / 7)", | ||||||
|  |             right: "25%", | ||||||
|  |             bottom: "4%", | ||||||
|  |           }} | ||||||
|  |           className="rounded-full absolute bg-purple-200 bg-opacity-30 backdrop-filter backdrop-blur-md" | ||||||
|  |         ></div> | ||||||
|  |         <div | ||||||
|  |           style={{ | ||||||
|  |             width: "calc(100vw / 8)", | ||||||
|  |             height: "calc(100vw / 8)", | ||||||
|  |             right: "3%", | ||||||
|  |             top: "15%", | ||||||
|  |           }} | ||||||
|  |           className="rounded-full absolute bg-green-200 bg-opacity-40 backdrop-filter backdrop-blur-md" | ||||||
|  |         ></div> | ||||||
|  |         <div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10 z-50"> | ||||||
|  |           <h2 className="text-lg">تبلیغات دانوینی</h2> | ||||||
|  |           <p className="text-sm text-justify leading-6 mt-2"> | ||||||
|  |             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با | ||||||
|  |             استفاده از طراحان گرافیک است. | ||||||
|  |           </p> | ||||||
|  |         </div> | ||||||
|  |         <button className="rounded-sm text-base border p-3 w-6/12 absolute left-1/2 bottom-2 transform -translate-x-1/2 -translate-y-1/2 z-50"> | ||||||
|  |           دانلود اپلیکیشن | ||||||
|  |         </button> | ||||||
|  |       </div> | ||||||
|  |     </section> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default AdvertisementDesign1; | ||||||
| @ -0,0 +1,55 @@ | |||||||
|  | import React from "react"; | ||||||
|  | 
 | ||||||
|  | const AdvertisementDesign2 = () => { | ||||||
|  |   return ( | ||||||
|  |     <section className="mx-auto bg-white m-10 w-4/12  p-2"> | ||||||
|  |       <div | ||||||
|  |         className="h-56 rounded-3xl relative" | ||||||
|  |         style={{ backgroundColor: "#E3F2FF" }} | ||||||
|  |       > | ||||||
|  |         <div className="flex flex-col justify-center p-10 w-7/12"> | ||||||
|  |           <h2 className="text-lg">تبلیغات دانوینی</h2> | ||||||
|  |           <p className="text-sm text-justify leading-6 mt-2"> | ||||||
|  |             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با | ||||||
|  |             استفاده از طراحان گرافیک است. | ||||||
|  |           </p> | ||||||
|  |           <button className="rounded-lg text-sm border p-3 w-8/12 mx-auto bg-darkCrimsonBgColor text-white mt-2"> | ||||||
|  |             دانلود اپلیکیشن | ||||||
|  |           </button> | ||||||
|  |         </div> | ||||||
|  |         <div | ||||||
|  |           style={{ | ||||||
|  |             backgroundColor: "#00FFFF33", | ||||||
|  |             width: "calc(100vw / 15)", | ||||||
|  |             height: "calc(100vw / 15)", | ||||||
|  |             left: "20%", | ||||||
|  |             top: "15%", | ||||||
|  |           }} | ||||||
|  |           className="rounded-full absolute z-20 backdrop-filter backdrop-blur-md" | ||||||
|  |         ></div> | ||||||
|  |         <div | ||||||
|  |           style={{ | ||||||
|  |             backgroundColor: "#6E6EEF66", | ||||||
|  |             width: "calc(100vw / 10)", | ||||||
|  |             height: "calc(100vw / 10)", | ||||||
|  |             left: "7%", | ||||||
|  |             bottom: "-15%", | ||||||
|  |           }} | ||||||
|  |           className="rounded-full absolute z-10 backdrop-filter backdrop-blur-md" | ||||||
|  |         ></div> | ||||||
|  |         <div | ||||||
|  |           style={{ | ||||||
|  |             backgroundColor: "white", | ||||||
|  |             width: "calc(100vw / 12)", | ||||||
|  |             height: "calc(100vw / 12)", | ||||||
|  |             left: "0%", | ||||||
|  |             top: "10%", | ||||||
|  |           }} | ||||||
|  |           className="rounded-full absolute backdrop-filter backdrop-blur-md" | ||||||
|  |         ></div> | ||||||
|  |       </div> | ||||||
|  |     </section> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default AdvertisementDesign2; | ||||||
| After Width: | Height: | Size: 1.4 KiB | 
| @ -0,0 +1,91 @@ | |||||||
|  | import React from "react"; | ||||||
|  | 
 | ||||||
|  | import cart from "./cart-icon.svg"; | ||||||
|  | import map from "./map-icon.svg"; | ||||||
|  | import setting from "./setting-icon.svg"; | ||||||
|  | 
 | ||||||
|  | const AdvertisementDesign3 = ({ features }) => { | ||||||
|  |   return ( | ||||||
|  |     <section className="mx-auto bg-white m-10 w-full sm:w-5/12  p-2"> | ||||||
|  |       <div | ||||||
|  |         className="rounded-3xl relative" | ||||||
|  |         style={{ backgroundColor: "#E3F2FF" }} | ||||||
|  |       > | ||||||
|  |         <div className="flex flex-col justify-center p-10 w-8/12"> | ||||||
|  |           <h2 className="text-lg text-productPrice  z-50">تبلیغات دانوینی</h2> | ||||||
|  |           <p className="text-sm text-justify leading-6 mt-2 text-productPrice  z-50"> | ||||||
|  |             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با | ||||||
|  |             استفاده از طراحان گرافیک است. | ||||||
|  |           </p> | ||||||
|  |           <div className="mt-3"> | ||||||
|  |             {features.map((feature, i) => ( | ||||||
|  |               <div className="flex flex-row items-center mt-2"> | ||||||
|  |                 <img src={feature.icon} alt="" className="w-6 h-6  z-50" /> | ||||||
|  |                 <p className="text-sm mr-2 text-justify leading-6 text-productPrice font-light  z-50"> | ||||||
|  |                   {feature.title} | ||||||
|  |                 </p> | ||||||
|  |               </div> | ||||||
|  |             ))} | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |         <div | ||||||
|  |           style={{ | ||||||
|  |             backgroundColor: "#00FFFF22", | ||||||
|  |             width: "calc(100vw / 15)", | ||||||
|  |             height: "calc(100vw / 15)", | ||||||
|  |             left: "8%", | ||||||
|  |             top: "20%", | ||||||
|  |           }} | ||||||
|  |           className="rounded-full absolute z-20 bg-opacity-30 backdrop-filter backdrop-blur-md" | ||||||
|  |         ></div> | ||||||
|  |         <div | ||||||
|  |           style={{ | ||||||
|  |             backgroundColor: "#6E6EEF22", | ||||||
|  |             width: "calc(100vw / 10)", | ||||||
|  |             height: "calc(100vw / 10)", | ||||||
|  |             left: "17%", | ||||||
|  |             top: "10%", | ||||||
|  |           }} | ||||||
|  |           className="rounded-full absolute bg-opacity-30 backdrop-filter backdrop-blur-md" | ||||||
|  |         ></div> | ||||||
|  |         <div | ||||||
|  |           style={{ | ||||||
|  |             backgroundColor: "#06BACE22", | ||||||
|  |             width: "calc(100vw / 11)", | ||||||
|  |             height: "calc(100vw / 11)", | ||||||
|  |             left: "12%", | ||||||
|  |             bottom: "2%", | ||||||
|  |           }} | ||||||
|  |           className="rounded-full absolute" | ||||||
|  |         ></div> | ||||||
|  |         <div className="absolute bottom-5 left-10"> | ||||||
|  |           <button className="border-2 border-blue-500 text-blue-500  ml-4 rounded p-2 text-sm"> | ||||||
|  |             تماس با ما | ||||||
|  |           </button> | ||||||
|  |           <button className="bg-blue-500 border-2 border-blue-500 text-white rounded p-2 text-sm"> | ||||||
|  |             به سلامت | ||||||
|  |           </button> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |     </section> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default AdvertisementDesign3; | ||||||
|  | 
 | ||||||
|  | AdvertisementDesign3.defaultProps = { | ||||||
|  |   features: [ | ||||||
|  |     { | ||||||
|  |       icon: cart, | ||||||
|  |       title: "قابلیت های فروشگاهی بسیار پیشرفته و ساده", | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: map, | ||||||
|  |       title: "ارسال به تمام نقاط ایران", | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: setting, | ||||||
|  |       title: "تنظیمات پیشرفته و بیش از 2000 ماژول اختصاصی", | ||||||
|  |     }, | ||||||
|  |   ], | ||||||
|  | }; | ||||||
| After Width: | Height: | Size: 1.1 KiB | 
| After Width: | Height: | Size: 1.2 KiB | 
| @ -0,0 +1,27 @@ | |||||||
|  | import React, {useState} from 'react'; | ||||||
|  | import Design1 from './Design1'; | ||||||
|  | import Design2 from './Design2'; | ||||||
|  | import Design3 from './Design3'; | ||||||
|  | 
 | ||||||
|  | function Blogs() { | ||||||
|  |   const list = { | ||||||
|  |     1 : <Design1 />, | ||||||
|  |     2 : <Design2 />, | ||||||
|  |     3 : <Design3 />, | ||||||
|  |   } | ||||||
|  |   const [type, setType] = useState(1); | ||||||
|  |   return ( | ||||||
|  |     <div className="w-full flex flex-col items-center"> | ||||||
|  |       <select className="mb-10 w-20 bg-gray-200" onChange={(e) => setType(e.target.value)}> | ||||||
|  |         { | ||||||
|  |           Object.keys(list).map((option, index) => <option key={index}>{option}</option>) | ||||||
|  |         } | ||||||
|  |       </select> | ||||||
|  |       { | ||||||
|  |         list[type] | ||||||
|  |       } | ||||||
|  |     </div> | ||||||
|  |   ) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | export default Blogs | ||||||
| @ -0,0 +1,139 @@ | |||||||
|  | import React, { useState } from "react"; | ||||||
|  | 
 | ||||||
|  | const CourseChapter = ({ chapters }) => { | ||||||
|  |   const [selectedLesson, setSelectedLesson] = useState(null); | ||||||
|  | 
 | ||||||
|  |   return ( | ||||||
|  |     <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4"> | ||||||
|  |       <div | ||||||
|  |         className="rounded py-5 px-4 relative" | ||||||
|  |         style={{ backgroundColor: "#196EC033" }} | ||||||
|  |       > | ||||||
|  |         {/* top */} | ||||||
|  |         <div className="flex flex-row items-center justify-between"> | ||||||
|  |           <div> | ||||||
|  |             <h2 className="text-blue-800 text-base">سرفصل دوره</h2> | ||||||
|  |           </div> | ||||||
|  |           <div className="flex flex-row-reverse items-center divide-x transform translate-x-2"> | ||||||
|  |             <span className="text-blue-800 text-sm px-2">علوم تجربی</span> | ||||||
|  |             <span className="text-blue-800 text-sm px-2">پایه ششم</span> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |         {/* divider */} | ||||||
|  |         <div className="border-b border-blue-300 bg-opacity-10 my-5"></div> | ||||||
|  |         {/* course title */} | ||||||
|  |         {chapters.map((chapter, index) => ( | ||||||
|  |           <div className="flex flex-col" key={index}> | ||||||
|  |             <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between"> | ||||||
|  |               <p className="text-sm text-white">{chapter.title}</p> | ||||||
|  |               <span className="text-sm text-white">{chapter.duration}</span> | ||||||
|  |             </div> | ||||||
|  |             {/* course lessons */} | ||||||
|  |             {chapter.lessons.map((lesson, i) => ( | ||||||
|  |               <div | ||||||
|  |                 className="flex flex-row items-center justify-around" | ||||||
|  |                 key={i} | ||||||
|  |               > | ||||||
|  |                 {/* right div dot dot */} | ||||||
|  |                 <div | ||||||
|  |                   className="flex items-center relative flex-col " | ||||||
|  |                   style={{ width: "10%", transform: "translateY(30px)" }} | ||||||
|  |                 > | ||||||
|  |                   <div | ||||||
|  |                     className={`flex justify-center items-center w-4 h-4 rounded-full 
 | ||||||
|  |                     ${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"}, | ||||||
|  |                     ${lesson.passed ? "bg-red-600" : "bg-blue-600"} | ||||||
|  |                   `}
 | ||||||
|  |                   ></div> | ||||||
|  |                   <span | ||||||
|  |                     className="w-1" | ||||||
|  |                     style={{ | ||||||
|  |                       borderRight: "2px dotted yellow", | ||||||
|  |                       transform: "translateX(-1px)", | ||||||
|  |                       height: "65px", | ||||||
|  |                     }} | ||||||
|  |                   ></span> | ||||||
|  |                 </div> | ||||||
|  |                 {/* left div content  */} | ||||||
|  |                 <div | ||||||
|  |                   className={`mt-2 bg-white border border-blue-600 flex flex-col rounded-md cursor-pointer transition duration-200 ease-in-out group  hover:bg-blue-600
 | ||||||
|  |                   ${selectedLesson === lesson ? "bg-blue-600" : ""}`}
 | ||||||
|  |                   style={{ width: "80%" }} | ||||||
|  |                   onClick={() => setSelectedLesson(lesson)} | ||||||
|  |                 > | ||||||
|  |                   {/* top */} | ||||||
|  |                   <div className="flex flex-row items-center justify-between p-2"> | ||||||
|  |                     <p | ||||||
|  |                       className={`text-sm text-blue-500 group-hover:text-white
 | ||||||
|  |                       ${selectedLesson === lesson ? "text-red-600" : ""}`}
 | ||||||
|  |                     > | ||||||
|  |                       {lesson.title} | ||||||
|  |                     </p> | ||||||
|  |                     <span | ||||||
|  |                       className={`text-xs text-blue-500 group-hover:text-white border-r border-blue-200 pr-1
 | ||||||
|  |                     ${selectedLesson === lesson ? "text-red-600" : ""}`}
 | ||||||
|  |                     > | ||||||
|  |                       {lesson.duration} | ||||||
|  |                     </span> | ||||||
|  |                   </div> | ||||||
|  |                   {/* divider */} | ||||||
|  |                   <div | ||||||
|  |                     className={`border-t border-blue-600 group-hover:border-white ${ | ||||||
|  |                       selectedLesson === lesson ? "border-red-600" : "" | ||||||
|  |                     }`}
 | ||||||
|  |                   ></div> | ||||||
|  |                   {/* bottom */} | ||||||
|  |                   <span | ||||||
|  |                     className={`text-xs text-center text-blue-500 group-hover:text-white p-2
 | ||||||
|  |                   ${selectedLesson === lesson ? "text-red-600" : ""}`}
 | ||||||
|  |                   > | ||||||
|  |                     {lesson.play} | ||||||
|  |                   </span> | ||||||
|  |                 </div> | ||||||
|  |               </div> | ||||||
|  |             ))} | ||||||
|  |           </div> | ||||||
|  |         ))} | ||||||
|  |         {/* blue left border */} | ||||||
|  |         <div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div> | ||||||
|  |       </div> | ||||||
|  |     </section> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default CourseChapter; | ||||||
|  | 
 | ||||||
|  | CourseChapter.defaultProps = { | ||||||
|  |   chapters: [ | ||||||
|  |     { | ||||||
|  |       title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", | ||||||
|  |       duration: "2:30:13", | ||||||
|  |       lessons: [ | ||||||
|  |         { | ||||||
|  |           title: "آیا گوگل از ما دزدی میکند؟", | ||||||
|  |           duration: "14:30", | ||||||
|  |           play: "پخش", | ||||||
|  |           passed: true, | ||||||
|  |         }, | ||||||
|  |         { | ||||||
|  |           title: "چگونگی ساخت نیروگاه های برقی", | ||||||
|  |           duration: "22:31", | ||||||
|  |           play: "در حال پخش", | ||||||
|  |           passed: true, | ||||||
|  |         }, | ||||||
|  |         { | ||||||
|  |           title: "آیا از اینترنت می توان درآمد داشت؟", | ||||||
|  |           duration: "10:09", | ||||||
|  |           play: "نمایش", | ||||||
|  |           passed: false, | ||||||
|  |         }, | ||||||
|  |         { | ||||||
|  |           title: "زمین سبز و آسمان آبی", | ||||||
|  |           duration: "56:09", | ||||||
|  |           play: "نمایش", | ||||||
|  |           passed: false, | ||||||
|  |         }, | ||||||
|  |       ], | ||||||
|  |     }, | ||||||
|  |   ], | ||||||
|  | }; | ||||||
| @ -0,0 +1,49 @@ | |||||||
|  | import React from "react"; | ||||||
|  | 
 | ||||||
|  | const Design2D = ({ array }) => { | ||||||
|  |   return ( | ||||||
|  |     <section className="flex items-center justify-around bg-pink-100 h-60"> | ||||||
|  |       {array.map((item, index) => ( | ||||||
|  |         <div | ||||||
|  |           className={`flex flex-col h-full`} | ||||||
|  |           style={{ flex: item.flex }} | ||||||
|  |           key={index} | ||||||
|  |         > | ||||||
|  |           {item.items.map((item1, index) => ( | ||||||
|  |             <div | ||||||
|  |               className={`flex p-4 ${item1.bg}`} | ||||||
|  |               style={{ flex: item1.flex }} | ||||||
|  |               key={index} | ||||||
|  |             > | ||||||
|  |               <div className="bg-indigo-300 w-full h-full flex items-center justify-center"> | ||||||
|  |                 <p>inside div</p> | ||||||
|  |               </div> | ||||||
|  |             </div> | ||||||
|  |           ))} | ||||||
|  |         </div> | ||||||
|  |       ))} | ||||||
|  |     </section> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default Design2D; | ||||||
|  | 
 | ||||||
|  | Design2D.defaultProps = { | ||||||
|  |   array: [ | ||||||
|  |     { | ||||||
|  |       flex: 6, | ||||||
|  |       items: [{ bg: "bg-red-500", flex: 1 }], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       flex: 4, | ||||||
|  |       items: [{ bg: "bg-green-500", flex: 1 }], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       flex: 2, | ||||||
|  |       items: [ | ||||||
|  |         { bg: "bg-blue-500", flex: 1 }, | ||||||
|  |         { bg: "bg-yellow-500", flex: 1 }, | ||||||
|  |       ], | ||||||
|  |     }, | ||||||
|  |   ], | ||||||
|  | }; | ||||||
| After Width: | Height: | Size: 1.7 KiB | 
| After Width: | Height: | Size: 2.2 KiB | 
| After Width: | Height: | Size: 3.5 KiB | 
| After Width: | Height: | Size: 2.4 KiB | 
| @ -0,0 +1,120 @@ | |||||||
|  | import React from "react"; | ||||||
|  | 
 | ||||||
|  | import arrow from "./arrow-icon.svg"; | ||||||
|  | import delivery from "./delivery-icon.svg"; | ||||||
|  | import checked from "./icon1.svg"; | ||||||
|  | import circle from "./info-circle.svg"; | ||||||
|  | import shield from "./shield-tick.svg"; | ||||||
|  | import tick from "./tick-circle.svg"; | ||||||
|  | import shop from "./icon-shop.svg"; | ||||||
|  | 
 | ||||||
|  | const ProductStatusCard = ({ items, productPrice, discountPrice }) => { | ||||||
|  |   console.log(items.alertIcon); | ||||||
|  | 
 | ||||||
|  |   return ( | ||||||
|  |     <section className="bg-white m-10 w-full sm:w-8/12 md:w-5/12	lg:w-3/12	p-5"> | ||||||
|  |       <div className="bg-gray-200 rounded px-4 py-2"> | ||||||
|  |         {items.map((item, index) => ( | ||||||
|  |           <div> | ||||||
|  |             <div | ||||||
|  |               className="flex flex-row items-center justify-between mt-3 mb-3" | ||||||
|  |               key={index} | ||||||
|  |             > | ||||||
|  |               <div className="flex flex-row items-center"> | ||||||
|  |                 <img src={item.icon} alt="" className="w-8" /> | ||||||
|  |                 <div className="flex flex-col mr-3"> | ||||||
|  |                   <p className="text-sm"> | ||||||
|  |                     <span className="font-bold">{item.subtitle}</span> | ||||||
|  |                     {item.title} | ||||||
|  |                   </p> | ||||||
|  |                   {item.customerSatisfaction && ( | ||||||
|  |                     <p className="text-xs mt-1"> | ||||||
|  |                       رضایت خریداران: | ||||||
|  |                       <span className="font-bold text-green-500 mr-2"> | ||||||
|  |                         {item.customerSatisfactionPercent} | ||||||
|  |                       </span> | ||||||
|  |                     </p> | ||||||
|  |                   )} | ||||||
|  |                 </div> | ||||||
|  |               </div> | ||||||
|  |               {item.alertIcon && <img src={circle} alt="" className="w-5" />} | ||||||
|  |             </div> | ||||||
|  |             <div className="border-b border-gray-300"></div> | ||||||
|  |           </div> | ||||||
|  |         ))} | ||||||
|  |         <div className="flex flex-col items-center"> | ||||||
|  |           <p className="text-lg text-blue-600 mt-5 mb-2"> | ||||||
|  |             {productPrice} | ||||||
|  |             <span className="text-sm text-gray-700 font-light">تومان</span> | ||||||
|  |           </p> | ||||||
|  |           <p className="text-xs font-light text-gray-600"> | ||||||
|  |             با خرید این کالا | ||||||
|  |             <span>{discountPrice}</span> | ||||||
|  |             صرفه جویی کنید | ||||||
|  |           </p> | ||||||
|  |         </div> | ||||||
|  |         <div className="w-full flex flex-col items-center"> | ||||||
|  |           <button className="w-6/12 mt-5 mb-2 rounded bg-blue-400 text-white p-2 text-sm hover:bg-blue-600 transtition ease-linear duration-300"> | ||||||
|  |             افزودن به سبد خرید | ||||||
|  |           </button> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |       <div className="bg-gray-200 rounded px-4 py-2 mt-2 flex flex-row items-center"> | ||||||
|  |         <div> | ||||||
|  |           <img src={arrow} alt="" className="w-20 h-20" /> | ||||||
|  |         </div> | ||||||
|  |         <div className="flex flex-col mr-5"> | ||||||
|  |           <h2 className="text-sm font-bold text-blue-900"> | ||||||
|  |             بازگشت بی چون و چرا | ||||||
|  |           </h2> | ||||||
|  |           <p className="text-xs mt-2 leading-5 text-justify"> | ||||||
|  |             از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی | ||||||
|  |             خوشتون نیومده میتونید بی قید و شرط پس بدید | ||||||
|  |           </p> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |     </section> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default ProductStatusCard; | ||||||
|  | 
 | ||||||
|  | ProductStatusCard.defaultProps = { | ||||||
|  |   items: [ | ||||||
|  |     { | ||||||
|  |       icon: tick, | ||||||
|  |       title: "توصیه به خرید توسط 4420 نفر", | ||||||
|  |       subtitle: null, | ||||||
|  |       alertIcon: false, | ||||||
|  |       customerSatisfaction: false, | ||||||
|  |       customerSatisfactionPercent: null, | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: shop, | ||||||
|  |       title: " آپادانا ", | ||||||
|  |       subtitle: "  فروشنده", | ||||||
|  |       alertIcon: true, | ||||||
|  |       customerSatisfaction: true, | ||||||
|  |       customerSatisfactionPercent: " 91.5 ", | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: delivery, | ||||||
|  |       title: " 20 روز کاری پس از سفارش ", | ||||||
|  |       subtitle: "زمان ارسال", | ||||||
|  |       alertIcon: false, | ||||||
|  |       customerSatisfaction: false, | ||||||
|  |       customerSatisfactionPercent: null, | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: shield, | ||||||
|  |       title: "اصالت و سلامت فیزیکی", | ||||||
|  |       subtitle: "گارانتی ", | ||||||
|  |       alertIcon: true, | ||||||
|  |       customerSatisfaction: false, | ||||||
|  |       customerSatisfactionPercent: null, | ||||||
|  |     }, | ||||||
|  |   ], | ||||||
|  | 
 | ||||||
|  |   productPrice: " 56/894/000 ", | ||||||
|  |   discountPrice: " 540.000 ", | ||||||
|  | }; | ||||||
| After Width: | Height: | Size: 829 B | 
| After Width: | Height: | Size: 864 B | 
| After Width: | Height: | Size: 652 B | 
| After Width: | Height: | Size: 499 B | 
| After Width: | Height: | Size: 434 B | 
| After Width: | Height: | Size: 1.4 KiB | 
| After Width: | Height: | Size: 1.1 KiB | 
| @ -0,0 +1,159 @@ | |||||||
|  | import React from "react"; | ||||||
|  | 
 | ||||||
|  | import "./index.scss"; | ||||||
|  | 
 | ||||||
|  | import downwardArrow from "./arrow-down.svg"; | ||||||
|  | import profilePic from "./profile-pic.svg"; | ||||||
|  | import element from "./element-4.svg"; | ||||||
|  | import folderOpen from "./folder-open.svg"; | ||||||
|  | import wallet from "./wallet-money.svg"; | ||||||
|  | import logout from "./logout.svg"; | ||||||
|  | import messageText from "./message-text.svg"; | ||||||
|  | import moon from "./moon.svg"; | ||||||
|  | import sms from "./sms.svg"; | ||||||
|  | import userEdit from "./user-edit.svg"; | ||||||
|  | import Switch from "../Switch"; | ||||||
|  | 
 | ||||||
|  | const SidebarMenu = ({ items, buttons }) => { | ||||||
|  |   return ( | ||||||
|  |     <section> | ||||||
|  |       <div | ||||||
|  |         style={{ width: "20%" }} | ||||||
|  |         className="bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar" | ||||||
|  |       > | ||||||
|  |         {/* profile */} | ||||||
|  |         <div className="flex flex-row items-center"> | ||||||
|  |           <img src={profilePic} alt="" className="w-12 rounded-full" /> | ||||||
|  |           <p className="text-blue-600 font-bold text-base flex-1 mx-2"> | ||||||
|  |             کامران کوهستانی شیرازی | ||||||
|  |           </p> | ||||||
|  |           <img src={downwardArrow} alt="" className="w-5" /> | ||||||
|  |         </div> | ||||||
|  |         {/* divider */} | ||||||
|  |         <div className="border border-gray-200 mt-5"></div> | ||||||
|  |         <p className="text-xs text-gray-400 my-4">منوی کاربری</p> | ||||||
|  |         {/* items */} | ||||||
|  |         {items.map((item, i) => ( | ||||||
|  |           <div className="flex flex-col item-center"> | ||||||
|  |             {/* menu items */} | ||||||
|  |             <div | ||||||
|  |               key={i} | ||||||
|  |               className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" | ||||||
|  |             > | ||||||
|  |               <img src={item.icon} alt="" /> | ||||||
|  |               <p className="text-blue-600 text-sm flex-1 mx-2">{item.title}</p> | ||||||
|  |               {item.notification && ( | ||||||
|  |                 <div className=" w-6 h-6 bg-blue-700 text-center rounded-full flex flex-col items-center justify-center"> | ||||||
|  |                   <span className=" text-white text-xs"> | ||||||
|  |                     {item.notification} | ||||||
|  |                   </span> | ||||||
|  |                 </div> | ||||||
|  |               )} | ||||||
|  |             </div> | ||||||
|  |             {/* sub items */} | ||||||
|  |             {item.subItems.map((subItem, i) => ( | ||||||
|  |               <div | ||||||
|  |                 key={i} | ||||||
|  |                 className="flex flex-row items-center cursor-pointer hover:bg-gray-100 rounded-md p-2" | ||||||
|  |               > | ||||||
|  |                 {subItem.name && ( | ||||||
|  |                   <p className="text-gray-400 text-xs flex-1 mr-4"> | ||||||
|  |                     {subItem.name} | ||||||
|  |                   </p> | ||||||
|  |                 )} | ||||||
|  |                 {subItem.num && ( | ||||||
|  |                   <div className=" w-6 h-6 bg-yellow-400 text-center rounded-full flex flex-col items-center justify-center"> | ||||||
|  |                     <span className=" text-white text-xs">{subItem.num}</span> | ||||||
|  |                   </div> | ||||||
|  |                 )} | ||||||
|  |               </div> | ||||||
|  |             ))} | ||||||
|  |           </div> | ||||||
|  |         ))} | ||||||
|  |         {/* buttons */} | ||||||
|  |         {buttons.map((button, i) => ( | ||||||
|  |           <div className="flex flex-col item-center"> | ||||||
|  |             {/* divider */} | ||||||
|  |             <div className="border border-gray-200 my-1"></div> | ||||||
|  |             <div | ||||||
|  |               key={i} | ||||||
|  |               className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" | ||||||
|  |             > | ||||||
|  |               <img src={button.icon} alt="" /> | ||||||
|  |               <p className="text-blue-600 text-sm flex-1 mx-2"> | ||||||
|  |                 {button.title} | ||||||
|  |               </p> | ||||||
|  |               {button.leftIcon && <Switch />} | ||||||
|  |             </div> | ||||||
|  |           </div> | ||||||
|  |         ))} | ||||||
|  |       </div> | ||||||
|  |     </section> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default SidebarMenu; | ||||||
|  | 
 | ||||||
|  | SidebarMenu.defaultProps = { | ||||||
|  |   items: [ | ||||||
|  |     { | ||||||
|  |       icon: element, | ||||||
|  |       title: "داشبورد مدیریت", | ||||||
|  |       notification: null, | ||||||
|  |       subItems: [], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: folderOpen, | ||||||
|  |       title: "پروژه ها", | ||||||
|  |       notification: null, | ||||||
|  |       subItems: [ | ||||||
|  |         { name: "افزدون پروژه", num: null }, | ||||||
|  |         { name: "مدیریت پروژه ها", num: null }, | ||||||
|  |         { name: "پروژه های حذف شده", num: null }, | ||||||
|  |       ], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: wallet, | ||||||
|  |       title: "مالی و حسابداری", | ||||||
|  |       notification: null, | ||||||
|  |       subItems: [ | ||||||
|  |         { name: "تمدید سرویس", num: null }, | ||||||
|  |         { name: "بسته های اشتراکی", num: null }, | ||||||
|  |         { name: "فاکتور ها", num: 1 }, | ||||||
|  |         { name: "درخواست تسویه حساب", num: null }, | ||||||
|  |       ], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: userEdit, | ||||||
|  |       title: "دیدگاه ها", | ||||||
|  |       notification: null, | ||||||
|  |       subItems: [], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: userEdit, | ||||||
|  |       title: "حساب کاربری", | ||||||
|  |       notification: null, | ||||||
|  |       subItems: [{ name: "ویرایش حساب کاربری", num: null }], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: sms, | ||||||
|  |       title: "پشتیبانی", | ||||||
|  |       notification: 7, | ||||||
|  |       subItems: [ | ||||||
|  |         { name: "تیکت ها", num: null }, | ||||||
|  |         { name: "ارسال تیکت جدید", num: null }, | ||||||
|  |         { name: "ویکی", num: null }, | ||||||
|  |       ], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: messageText, | ||||||
|  |       title: "متستندات", | ||||||
|  |       notification: null, | ||||||
|  |       subItems: [{ name: "API توسعه دهندگان", num: null }], | ||||||
|  |     }, | ||||||
|  |   ], | ||||||
|  |   buttons: [ | ||||||
|  |     { icon: moon, title: "حالت شب", leftIcon: moon }, | ||||||
|  |     { icon: logout, title: "خروج از حساب کاربری", leftIcon: null }, | ||||||
|  |   ], | ||||||
|  | }; | ||||||
| @ -0,0 +1,9 @@ | |||||||
|  | .no-scrollbar::-webkit-scrollbar { | ||||||
|  |   display: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* Hide scrollbar for IE, Edge and Firefox */ | ||||||
|  | .no-scrollbar { | ||||||
|  |   -ms-overflow-style: none; /* IE and Edge */ | ||||||
|  |   scrollbar-width: none; /* Firefox */ | ||||||
|  | } | ||||||
| After Width: | Height: | Size: 943 B | 
| After Width: | Height: | Size: 874 B | 
| After Width: | Height: | Size: 597 B | 
| After Width: | Height: | Size: 48 KiB | 
| After Width: | Height: | Size: 755 B | 
| After Width: | Height: | Size: 1.3 KiB | 
| After Width: | Height: | Size: 2.0 KiB | 
| After Width: | Height: | Size: 868 B | 
| @ -0,0 +1,344 @@ | |||||||
|  | import React, { useEffect, useState } from "react"; | ||||||
|  | 
 | ||||||
|  | import StarRating from "../StarRating"; | ||||||
|  | import ReactTooltip from "react-tooltip"; | ||||||
|  | 
 | ||||||
|  | import watermelon from "./watermelon.png"; | ||||||
|  | import video from "./danovin.mp4"; | ||||||
|  | 
 | ||||||
|  | import discountImg from "./discount.png"; | ||||||
|  | 
 | ||||||
|  | import heart from "./vuesax-linear-heart.svg"; | ||||||
|  | import YellowDotIcon from "./yellowDotIcon.svg"; | ||||||
|  | import RedDotIcon from "./redDotIcon.svg"; | ||||||
|  | import PurpleDotIcon from "./purpleDotIcon.svg"; | ||||||
|  | import LightBlueDotIcon from "./lightBlueDotIcon.svg"; | ||||||
|  | import whitePlayIcon from "./white-play-button-icon.svg"; | ||||||
|  | 
 | ||||||
|  | const VodProduct = ({ | ||||||
|  |   productColor, | ||||||
|  |   colors, | ||||||
|  |   likeBtn, | ||||||
|  |   discount, | ||||||
|  |   discountPricePercent, | ||||||
|  |   discountPrice, | ||||||
|  |   productContent, | ||||||
|  |   star, | ||||||
|  |   productTags, | ||||||
|  |   priceDirection, | ||||||
|  |   productTitleAlignment, | ||||||
|  |   priceHolder, | ||||||
|  |   productCat, | ||||||
|  |   rangeHolder, | ||||||
|  |   priceTitle, | ||||||
|  |   addToCartHolder, | ||||||
|  |   productTitleCategoryHolder, | ||||||
|  |   productTitleCategoryHolderAlignment, | ||||||
|  |   priceStarHolder, | ||||||
|  |   priceStarAlignment, | ||||||
|  |   rangeWidth, | ||||||
|  | }) => { | ||||||
|  |   const [progressFlag, setProgressFlag] = useState(false); | ||||||
|  |   // const [openModal, setOpenModal] = useState(false);
 | ||||||
|  |   useEffect(() => { | ||||||
|  |     setTimeout(() => { | ||||||
|  |       setProgressFlag(true); | ||||||
|  |     }, 1000); | ||||||
|  |   }); | ||||||
|  |   return ( | ||||||
|  |     <section className="mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8"> | ||||||
|  |       رویه باتن پلی / عکس کلیک کنید | ||||||
|  |       {/* product UI Design */} | ||||||
|  |       <div className="flex flex-wrap sm:flex-nowrap justify-around"> | ||||||
|  |         <div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4"> | ||||||
|  |           <div | ||||||
|  |             className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`} | ||||||
|  |           > | ||||||
|  |             {/* product image */} | ||||||
|  |             <div | ||||||
|  |               className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer" | ||||||
|  |               style={{ | ||||||
|  |                 backgroundImage: `url(${watermelon})`, | ||||||
|  |                 backgroundSize: "100% 100%", | ||||||
|  |                 backgroundRepeat: "no-repeat", | ||||||
|  |                 minHeight: "180px", | ||||||
|  |               }} | ||||||
|  |               data-modal-toggle="large-modal" | ||||||
|  |             > | ||||||
|  |               {/* icons on image */} | ||||||
|  |               <div className="absolute left-2 top-2"> | ||||||
|  |                 {discountPricePercent && ( | ||||||
|  |                   <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> | ||||||
|  |                     <p className="text-discountPriceTitle font-bold text-xs"> | ||||||
|  |                       23<span>%</span> | ||||||
|  |                     </p> | ||||||
|  |                   </div> | ||||||
|  |                 )} | ||||||
|  |                 {likeBtn && ( | ||||||
|  |                   <div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> | ||||||
|  |                     <img src={heart} alt="" className="w-5" /> | ||||||
|  |                   </div> | ||||||
|  |                 )} | ||||||
|  |                 {discount && ( | ||||||
|  |                   <div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> | ||||||
|  |                     <img src={discountImg} alt="" className="w-full" /> | ||||||
|  |                   </div> | ||||||
|  |                 )} | ||||||
|  |               </div> | ||||||
|  |               {/* play button */} | ||||||
|  |               <div | ||||||
|  |                 className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`} | ||||||
|  |                 // onClick={() => setOpenModal(true)}
 | ||||||
|  |               > | ||||||
|  |                 <img | ||||||
|  |                   src={whitePlayIcon} | ||||||
|  |                   alt="" | ||||||
|  |                   className="w-5 h-5" | ||||||
|  |                   // onClick={() => setOpenModal(true)}
 | ||||||
|  |                 /> | ||||||
|  |               </div> | ||||||
|  |               {/* select Color */} | ||||||
|  |               {productColor && ( | ||||||
|  |                 <div className="flex items-center absolute right-2 bottom-2"> | ||||||
|  |                   {/* {colors.map((color,index))} */} | ||||||
|  |                   <img | ||||||
|  |                     src={YellowDotIcon} | ||||||
|  |                     alt="" | ||||||
|  |                     data-tip="زرد" | ||||||
|  |                     className="w-3 h-3 ml-1 cursor-pointer" | ||||||
|  |                   /> | ||||||
|  |                   <ReactTooltip place="top" type="dark" effect="float" /> | ||||||
|  |                 </div> | ||||||
|  |               )} | ||||||
|  |             </div> | ||||||
|  |             {/* product content */} | ||||||
|  |             <div className="px-2"> | ||||||
|  |               {/* content */} | ||||||
|  |               <div className="mt-4 flex flex-col"> | ||||||
|  |                 <div | ||||||
|  |                   className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `} | ||||||
|  |                 > | ||||||
|  |                   <h2 | ||||||
|  |                     className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`} | ||||||
|  |                   > | ||||||
|  |                     نسخه چاپی علموم تجربه هفتم | ||||||
|  |                   </h2> | ||||||
|  |                   {productCat && ( | ||||||
|  |                     <span | ||||||
|  |                       className={`text-xs font-light text-darkCrimsonTextColor`} | ||||||
|  |                     > | ||||||
|  |                       پایه سوم | ||||||
|  |                     </span> | ||||||
|  |                   )} | ||||||
|  |                 </div> | ||||||
|  |                 {productContent && ( | ||||||
|  |                   <p | ||||||
|  |                     className={`text-justify text-sm leading-6 text-productContent`} | ||||||
|  |                   > | ||||||
|  |                     این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های | ||||||
|  |                     خوب دیگری نیز دارد. | ||||||
|  |                   </p> | ||||||
|  |                 )} | ||||||
|  |               </div> | ||||||
|  |               {/* price */} | ||||||
|  |               <div | ||||||
|  |                 className={`flex ${priceStarHolder} ${priceStarAlignment}  justify-between mt-2`} | ||||||
|  |               > | ||||||
|  |                 {priceHolder && ( | ||||||
|  |                   <div | ||||||
|  |                     className={`flex items-center justify-between ${priceDirection}`} | ||||||
|  |                   > | ||||||
|  |                     {/* price */} | ||||||
|  |                     <div className=""> | ||||||
|  |                       <div | ||||||
|  |                         className={`${ | ||||||
|  |                           priceDirection.indexOf("col") !== -1 | ||||||
|  |                             ? "inline" | ||||||
|  |                             : "flex" | ||||||
|  |                         }`}
 | ||||||
|  |                       > | ||||||
|  |                         {priceTitle && ( | ||||||
|  |                           <span className="text-xs text-borderColor ml-2"> | ||||||
|  |                             قیمت | ||||||
|  |                           </span> | ||||||
|  |                         )} | ||||||
|  |                         {discountPrice && ( | ||||||
|  |                           <p className="line-through text-xs text-borderColor"> | ||||||
|  |                             <span> قیمت</span> 140<span>تومان</span> | ||||||
|  |                           </p> | ||||||
|  |                         )} | ||||||
|  |                       </div> | ||||||
|  |                       <p | ||||||
|  |                         className={`text-sm font-semibold inline text-productPrice`} | ||||||
|  |                       > | ||||||
|  |                         111.000<span>تومان</span> | ||||||
|  |                       </p> | ||||||
|  |                     </div> | ||||||
|  |                     {/* add to cart */} | ||||||
|  |                     {addToCartHolder && ( | ||||||
|  |                       <button | ||||||
|  |                         className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500  ${ | ||||||
|  |                           priceDirection.indexOf("col") !== -1 ? "w-full" : "" | ||||||
|  |                         }`}
 | ||||||
|  |                       > | ||||||
|  |                         اضافه کردن به سبد خرید | ||||||
|  |                       </button> | ||||||
|  |                     )} | ||||||
|  |                   </div> | ||||||
|  |                 )} | ||||||
|  |                 {star && ( | ||||||
|  |                   <div className="flex items-center"> | ||||||
|  |                     <StarRating /> | ||||||
|  |                     <span className="text-xs text-productContent font-bold mr-2"> | ||||||
|  |                       39 | ||||||
|  |                     </span> | ||||||
|  |                   </div> | ||||||
|  |                 )} | ||||||
|  |               </div> | ||||||
|  |               {productTags && ( | ||||||
|  |                 <div className="mt-2 flex flex-wrap"> | ||||||
|  |                   <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> | ||||||
|  |                     ارسال رایگان | ||||||
|  |                   </button> | ||||||
|  |                   <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> | ||||||
|  |                     برچسب های دیگر | ||||||
|  |                   </button> | ||||||
|  |                   <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> | ||||||
|  |                     دسته بندی به صورت کادو | ||||||
|  |                   </button> | ||||||
|  |                 </div> | ||||||
|  |               )} | ||||||
|  |               {rangeHolder && ( | ||||||
|  |                 <div className="bg-rangeBgColor h-3 w-full rounded mt-2"> | ||||||
|  |                   <div | ||||||
|  |                     className={`bg-rangeFillBgColor h-3 rounded duration-500`} | ||||||
|  |                     style={{ | ||||||
|  |                       width: progressFlag ? rangeWidth : 0, | ||||||
|  |                     }} | ||||||
|  |                   ></div> | ||||||
|  |                 </div> | ||||||
|  |               )} | ||||||
|  |             </div> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |       <div | ||||||
|  |         class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full" | ||||||
|  |         id="large-modal" | ||||||
|  |       > | ||||||
|  |         <div class="relative px-4 w-full max-w-4xl h-full md:h-auto"> | ||||||
|  |           <div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> | ||||||
|  |             <div class="flex justify-between items-center p-5 rounded-t border-b border-gray-200 dark:border-gray-600"> | ||||||
|  |               <button | ||||||
|  |                 type="button" | ||||||
|  |                 class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" | ||||||
|  |                 data-modal-toggle="large-modal" | ||||||
|  |               > | ||||||
|  |                 <svg | ||||||
|  |                   class="w-5 h-5" | ||||||
|  |                   fill="currentColor" | ||||||
|  |                   viewBox="0 0 20 20" | ||||||
|  |                   xmlns="http://www.w3.org/2000/svg" | ||||||
|  |                 > | ||||||
|  |                   <path | ||||||
|  |                     fill-rule="evenodd" | ||||||
|  |                     d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" | ||||||
|  |                     clip-rule="evenodd" | ||||||
|  |                   ></path> | ||||||
|  |                 </svg> | ||||||
|  |               </button> | ||||||
|  |             </div> | ||||||
|  |             <div class="p-6 space-y-6"> | ||||||
|  |               <video | ||||||
|  |                 controls | ||||||
|  |                 className={`border transition-all duration-1000
 | ||||||
|  |           `}
 | ||||||
|  |                 src={video} | ||||||
|  |                 type="video/mp4" | ||||||
|  |               ></video> | ||||||
|  |             </div> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |     </section> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | // hover:-translate-y-2
 | ||||||
|  | export default VodProduct; | ||||||
|  | 
 | ||||||
|  | // text colors i used for product title:
 | ||||||
|  | // text-darkCrimsonTextColor
 | ||||||
|  | // text-productTitle
 | ||||||
|  | 
 | ||||||
|  | // text color i used for product excerpt:
 | ||||||
|  | // text-productContent
 | ||||||
|  | 
 | ||||||
|  | // text color i used for product cat:
 | ||||||
|  | // text-darkCrimsonTextColor
 | ||||||
|  | 
 | ||||||
|  | // bg color i used for play button icon:
 | ||||||
|  | // bg-playButtonIcon
 | ||||||
|  | // bg-playButtonIcon2
 | ||||||
|  | 
 | ||||||
|  | VodProduct.defaultProps = { | ||||||
|  |   colors: [ | ||||||
|  |     { | ||||||
|  |       icon: YellowDotIcon, | ||||||
|  |       dataType: "زرد", | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: RedDotIcon, | ||||||
|  |       dataType: "قرمز", | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: PurpleDotIcon, | ||||||
|  |       dataType: "بنفش", | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       icon: LightBlueDotIcon, | ||||||
|  |       dataType: "آبی", | ||||||
|  |     }, | ||||||
|  | 
 | ||||||
|  |     LightBlueDotIcon, | ||||||
|  |   ], | ||||||
|  | 
 | ||||||
|  |   // icons on product image
 | ||||||
|  |   productColor: true, | ||||||
|  |   likeBtn: true, | ||||||
|  |   discount: true, | ||||||
|  |   discountPricePercent: true, | ||||||
|  |   // product price
 | ||||||
|  |   discountPrice: true, | ||||||
|  |   priceHolder: true, | ||||||
|  |   priceTitle: false, | ||||||
|  | 
 | ||||||
|  |   productContent: false, | ||||||
|  |   star: true, | ||||||
|  |   productTags: false, | ||||||
|  |   productCat: true, | ||||||
|  |   rangeHolder: true, | ||||||
|  | 
 | ||||||
|  |   addToCartHolder: false, | ||||||
|  | 
 | ||||||
|  |   productTitleAlignment: "text-justify", | ||||||
|  | 
 | ||||||
|  |   // برای درصد دادن به عرض رنج
 | ||||||
|  |   rangeWidth: "75%", | ||||||
|  | 
 | ||||||
|  |   priceDirection: "flex-row", | ||||||
|  | 
 | ||||||
|  |   productTitleCategoryHolder: "flex-row", | ||||||
|  |   productTitleCategoryHolderAlignment: "items-center", | ||||||
|  | 
 | ||||||
|  |   // برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
 | ||||||
|  |   // یادمون باشه که حتما رویه
 | ||||||
|  |   // flex-col-reverse
 | ||||||
|  |   // بزاریم
 | ||||||
|  | 
 | ||||||
|  |   // دیفالتش باید این باشه:
 | ||||||
|  |   // priceStarHolder: flex-row
 | ||||||
|  |   priceStarHolder: "flex-row", | ||||||
|  |   // دیفالتش باید این باشه:
 | ||||||
|  |   // priceStarHolder: items-center
 | ||||||
|  |   priceStarAlignment: "items-center", | ||||||
|  | }; | ||||||
| After Width: | Height: | Size: 177 B | 
| After Width: | Height: | Size: 177 B | 
| After Width: | Height: | Size: 177 B | 
| After Width: | Height: | Size: 675 B | 
| After Width: | Height: | Size: 34 KiB | 
| After Width: | Height: | Size: 305 B | 
| After Width: | Height: | Size: 177 B |