Pedram Keshavarzi 3 years ago
commit 5a8c845e5b
  1. 2
      src/Views/Home/Sidebar/index.js
  2. 52
      src/components/Advertisement/Design1/index.js
  3. 55
      src/components/Advertisement/Design2/index.js
  4. 10
      src/components/Advertisement/Design3/cart-icon.svg
  5. 91
      src/components/Advertisement/Design3/index.js
  6. 8
      src/components/Advertisement/Design3/map-icon.svg
  7. 5
      src/components/Advertisement/Design3/setting-icon.svg
  8. 27
      src/components/Advertisement/index.js
  9. 139
      src/components/CourseChapter/index.js
  10. 49
      src/components/Design2D/index.js
  11. 11
      src/components/ProductStatusCard/arrow-icon.svg
  12. 11
      src/components/ProductStatusCard/delivery-icon.svg
  13. 12
      src/components/ProductStatusCard/icon-shop.svg
  14. 6
      src/components/ProductStatusCard/icon1.svg
  15. 120
      src/components/ProductStatusCard/index.js
  16. 6
      src/components/ProductStatusCard/info-circle.svg
  17. 5
      src/components/ProductStatusCard/shield-tick.svg
  18. 5
      src/components/ProductStatusCard/tick-circle.svg
  19. 3
      src/components/SidebarMenu/Vector.svg
  20. 4
      src/components/SidebarMenu/arrow-down.svg
  21. 7
      src/components/SidebarMenu/element-4.svg
  22. 6
      src/components/SidebarMenu/folder-open.svg
  23. 159
      src/components/SidebarMenu/index.js
  24. 9
      src/components/SidebarMenu/index.scss
  25. 6
      src/components/SidebarMenu/logout.svg
  26. 8
      src/components/SidebarMenu/message-text.svg
  27. 4
      src/components/SidebarMenu/moon.svg
  28. 8
      src/components/SidebarMenu/profile-pic.svg
  29. 5
      src/components/SidebarMenu/sms.svg
  30. 9
      src/components/SidebarMenu/user-edit.svg
  31. 8
      src/components/SidebarMenu/wallet-money.svg
  32. BIN
      src/components/VodProductNew/danovin.mp4
  33. BIN
      src/components/VodProductNew/discount.png
  34. 344
      src/components/VodProductNew/index.js
  35. 3
      src/components/VodProductNew/lightBlueDotIcon.svg
  36. 3
      src/components/VodProductNew/purpleDotIcon.svg
  37. 3
      src/components/VodProductNew/redDotIcon.svg
  38. 8
      src/components/VodProductNew/vuesax-linear-heart.svg
  39. BIN
      src/components/VodProductNew/watermelon.png
  40. 3
      src/components/VodProductNew/white-play-button-icon.svg
  41. 3
      src/components/VodProductNew/yellowDotIcon.svg
  42. 66
      src/redux/data.js

@ -13,7 +13,7 @@ function Sidebar({ list, setActive }) {
/>
</header>
<ul className="w-full flex-1 p-0 m-0 list-none divided divide-y max-h-full overflow-y-scroll divide-blue-100 border-r border-gray-200">
{list.map((material, index) => (
{list.sort((a, b) => (a.name > b.name) ? 1 : -1).map((material, index) => (
<li
key={index}
className="w-full py-3 px-3 font-medium text-md cursor-pointer h-12"

@ -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;

@ -0,0 +1,10 @@
<svg id="vuesax_linear_bag-happy" data-name="vuesax/linear/bag-happy" xmlns="http://www.w3.org/2000/svg" width="54.237" height="54.237" viewBox="0 0 54.237 54.237">
<g id="bag-happy" transform="translate(0)">
<path id="Vector" d="M0,0A7.948,7.948,0,0,0,7.91,7.91,7.948,7.948,0,0,0,15.819,0" transform="translate(19.209 32.203)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M8.181,0,0,8.2" transform="translate(11.729 4.52)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0,8.181,8.2" transform="translate(34.328 4.52)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,4.52C0,.339,2.237,0,5.017,0H40.181C42.96,0,45.2.339,45.2,4.52c0,4.859-2.237,4.52-5.017,4.52H5.017C2.237,9.04,0,9.379,0,4.52Z" transform="translate(4.52 13.22)" fill="none" stroke="#132f52" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0,3.186,19.525c.723,4.384,2.463,7.593,8.927,7.593H25.74c7.028,0,8.068-3.073,8.881-7.322L38.418,0" transform="translate(7.91 22.599)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-width="2"/>
<path id="Vector-6" data-name="Vector" d="M0,0H54.237V54.237H0Z" fill="none" opacity="0"/>
</g>
</svg>

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 ماژول اختصاصی",
},
],
};

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="54.237" height="54.238" viewBox="0 0 54.237 54.238">
<g id="map" transform="translate(0 0)">
<path id="Vector" d="M0,10.039V32.027c0,4.294,3.051,6.057,6.757,3.932l5.311-3.028a5.043,5.043,0,0,1,4.271-.113L28.2,38.762a5.126,5.126,0,0,0,4.271-.113l9.785-5.6a5.061,5.061,0,0,0,2.282-3.932V7.123c0-4.294-3.051-6.057-6.757-3.932L32.475,6.219a5.043,5.043,0,0,1-4.271.113L16.339.411a5.126,5.126,0,0,0-4.271.113l-9.785,5.6A5,5,0,0,0,0,10.039Z" transform="translate(5.175 7.543)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0V29.379" transform="translate(19.345 9.04)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0V30.237" transform="translate(35.548 14.961)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H54.237V54.238H0Z" transform="translate(54.237 54.238) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,5 @@
<svg id="setting-2" xmlns="http://www.w3.org/2000/svg" width="54.605" height="54.605" viewBox="0 0 54.605 54.605">
<path id="Vector" d="M13.651,6.826A6.826,6.826,0,1,1,6.826,0,6.826,6.826,0,0,1,13.651,6.826Z" transform="translate(20.477 20.477)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,23.478v-4A4.336,4.336,0,0,1,4.323,15.15c4.118,0,5.8-2.912,3.731-6.484A4.321,4.321,0,0,1,9.647,2.773L13.583.521A3.8,3.8,0,0,1,18.77,1.886l.25.432c2.048,3.572,5.415,3.572,7.485,0l.25-.432A3.8,3.8,0,0,1,31.944.521L35.88,2.773a4.321,4.321,0,0,1,1.593,5.893c-2.07,3.572-.387,6.484,3.731,6.484a4.336,4.336,0,0,1,4.323,4.323v4A4.336,4.336,0,0,1,41.2,27.8c-4.118,0-5.8,2.912-3.731,6.484a4.315,4.315,0,0,1-1.593,5.893L31.944,42.43a3.8,3.8,0,0,1-5.187-1.365l-.25-.432c-2.048-3.572-5.415-3.572-7.485,0l-.25.432a3.8,3.8,0,0,1-5.187,1.365L9.647,40.178a4.321,4.321,0,0,1-1.593-5.893c2.07-3.572.387-6.484-3.731-6.484A4.336,4.336,0,0,1,0,23.478Z" transform="translate(4.55 5.827)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H54.6V54.6H0Z" fill="none" opacity="0"/>
</svg>

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 },
],
},
],
};

@ -0,0 +1,11 @@
<svg id="group" xmlns="http://www.w3.org/2000/svg" width="41.268" height="41.268" viewBox="0 0 41.268 41.268">
<path id="Vector" d="M0,0H17.195" transform="translate(20.634 9.56)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M3.817,0h9.56c3.061,0,3.817.757,3.817,3.783V10.85c0,3.026-.757,3.783-3.817,3.783H3.817C.757,14.633,0,13.876,0,10.85V3.783C0,.757.757,0,3.817,0Z" transform="translate(20.634 3.439)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H17.195" transform="translate(3.439 29.334)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M3.817,0h9.56c3.061,0,3.817.757,3.817,3.783V10.85c0,3.026-.757,3.783-3.817,3.783H3.817C.757,14.633,0,13.876,0,10.85V3.783C0,.757.757,0,3.817,0Z" transform="translate(3.439 23.213)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<g id="Group-2" data-name="Group" transform="translate(3.439 3.439)">
<path id="Vector-5" data-name="Vector" d="M12.036,0A12.028,12.028,0,0,1,0,12.036L1.805,9.027" transform="translate(22.353 22.353)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,12.036A12.028,12.028,0,0,1,12.036,0L10.231,3.009" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
<path id="Vector-7" data-name="Vector" d="M0,0H41.268V41.268H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -0,0 +1,11 @@
<svg id="group" xmlns="http://www.w3.org/2000/svg" width="51.463" height="51.463" viewBox="0 0 51.463 51.463">
<path id="Vector" d="M20.349,25.732h2.144a4.3,4.3,0,0,0,4.289-4.289V0H7.484A8.569,8.569,0,0,0,0,4.4" transform="translate(5.382 4.289)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,25.732a6.424,6.424,0,0,0,6.433,6.433H8.577a4.289,4.289,0,0,1,8.577,0h8.577a4.289,4.289,0,0,1,8.577,0h2.144a6.424,6.424,0,0,0,6.433-6.433V19.3H36.453a2.151,2.151,0,0,1-2.144-2.144V10.722a2.151,2.151,0,0,1,2.144-2.144h2.766L35.553,2.166A4.324,4.324,0,0,0,31.822,0H27.876V15.01A4.3,4.3,0,0,1,23.587,19.3H21.443" transform="translate(4.289 10.722)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(12.866 38.598)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(30.02 38.598)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M8.577,6.433v4.289H2.144A2.151,2.151,0,0,1,0,8.577V2.144A2.151,2.151,0,0,1,2.144,0H4.91Z" transform="translate(38.598 19.299)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H12.866" transform="translate(4.289 17.154)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-7" data-name="Vector" d="M0,0H8.577" transform="translate(4.289 23.587)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-8" data-name="Vector" d="M0,0H4.289" transform="translate(4.289 30.02)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-9" data-name="Vector" d="M0,0H51.463V51.463H0Z" transform="translate(0 0)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

@ -0,0 +1,12 @@
<svg id="Group_207" data-name="Group 207" xmlns="http://www.w3.org/2000/svg" width="45.601" height="45.601" viewBox="0 0 45.601 45.601">
<g id="Path_95" data-name="Path 95" transform="translate(0 0)" fill="#fff">
<path d="M 33.83258438110352 44.8504524230957 L 11.76785469055176 44.8504524230957 C 8.824884414672852 44.8504524230957 6.058054447174072 43.70439529418945 3.977064371109009 41.62339401245117 C 1.896064281463623 39.54239273071289 0.7500042915344238 36.77556610107422 0.7500042915344238 33.83258438110352 L 0.7500042915344238 8.825894355773926 C 0.7500042915344238 4.372834205627441 4.372834205627441 0.7500042915344238 8.825894355773926 0.7500042915344238 L 36.77455520629883 0.7500042915344238 C 41.24808502197266 0.7500042915344238 44.8504524230957 6.086584091186523 44.8504524230957 10.50503444671631 L 44.8504524230957 33.83258438110352 C 44.8504524230957 36.77556610107422 43.70439529418945 39.54239273071289 41.62339401245117 41.62339401245117 C 39.54239273071289 43.70439529418945 36.77556610107422 44.8504524230957 33.83258438110352 44.8504524230957 Z" stroke="none"/>
<path d="M 8.825893402099609 1.499996185302734 C 4.786384582519531 1.499996185302734 1.499996185302734 4.786384582519531 1.499996185302734 8.825893402099609 L 1.499996185302734 33.83258438110352 C 1.499996185302734 39.49430465698242 6.106132507324219 44.10044479370117 11.76785278320312 44.10044479370117 L 33.83258438110352 44.10044479370117 C 39.49430465698242 44.10044479370117 44.10044479370117 39.49430465698242 44.10044479370117 33.83258438110352 L 44.10044479370117 10.50503540039062 C 44.10044479370117 8.442455291748047 43.25521469116211 6.143684387207031 41.83945465087891 4.355815887451172 C 40.994873046875 3.289253234863281 39.21379470825195 1.499996185302734 36.77455520629883 1.499996185302734 L 8.825893402099609 1.499996185302734 M 8.825893402099609 -3.814697265625e-06 L 36.77455520629883 -3.814697265625e-06 C 41.64896392822266 -3.814697265625e-06 45.60044479370117 5.630622863769531 45.60044479370117 10.50503540039062 L 45.60044479370117 33.83258438110352 C 45.60044479370117 40.33179473876953 40.33179473876953 45.60044479370117 33.83258438110352 45.60044479370117 L 11.76785278320312 45.60044479370117 C 5.268653869628906 45.60044479370117 -3.814697265625e-06 40.33179473876953 -3.814697265625e-06 33.83258438110352 L -3.814697265625e-06 8.825893402099609 C -3.814697265625e-06 3.951484680175781 3.951484680175781 -3.814697265625e-06 8.825893402099609 -3.814697265625e-06 Z" stroke="none" fill="#3fa7ce"/>
</g>
<path id="Path_94" data-name="Path 94" d="M0,0S12.538,4.734,23.6,4.734A52.3,52.3,0,0,0,44.245,0" transform="translate(0.355 11.893)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_201" data-name="Line 201" x1="4.702" y1="14.752" transform="translate(26.924 0.693)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_202" data-name="Line 202" x1="4.759" y2="14.752" transform="translate(12.503 0.693)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<path id="Path_93" data-name="Path 93" d="M0,4.009S-2.153-10.205,7.212-10.538,14.377,4.009,14.377,4.009" transform="translate(16.048 40.303)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_203" data-name="Line 203" x1="12.209" transform="translate(16.696 21.329)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-width="1"/>
<line id="Line_204" data-name="Line 204" x1="12.209" transform="translate(16.696 25.742)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-width="1"/>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="45.6" height="45.6" viewBox="0 0 45.6 45.6">
<g id="Path_95" data-name="Path 95" fill="#fff">
<path d="M 33.83258438110352 44.8504524230957 L 11.76785469055176 44.8504524230957 C 8.824884414672852 44.8504524230957 6.058054447174072 43.70439529418945 3.977064371109009 41.62339401245117 C 1.896064281463623 39.54239273071289 0.7500042915344238 36.77556610107422 0.7500042915344238 33.83258438110352 L 0.7500042915344238 8.825894355773926 C 0.7500042915344238 4.372834205627441 4.372834205627441 0.7500042915344238 8.825894355773926 0.7500042915344238 L 36.77455520629883 0.7500042915344238 C 41.24808502197266 0.7500042915344238 44.8504524230957 6.086584091186523 44.8504524230957 10.50503444671631 L 44.8504524230957 33.83258438110352 C 44.8504524230957 36.77556610107422 43.70439529418945 39.54239273071289 41.62339401245117 41.62339401245117 C 39.54239273071289 43.70439529418945 36.77556610107422 44.8504524230957 33.83258438110352 44.8504524230957 Z" stroke="none"/>
<path d="M 8.825893402099609 1.499996185302734 C 4.786384582519531 1.499996185302734 1.499996185302734 4.786384582519531 1.499996185302734 8.825893402099609 L 1.499996185302734 33.83258438110352 C 1.499996185302734 39.49430465698242 6.106132507324219 44.10044479370117 11.76785278320312 44.10044479370117 L 33.83258438110352 44.10044479370117 C 39.49430465698242 44.10044479370117 44.10044479370117 39.49430465698242 44.10044479370117 33.83258438110352 L 44.10044479370117 10.50503540039062 C 44.10044479370117 8.442455291748047 43.25521469116211 6.143684387207031 41.83945465087891 4.355815887451172 C 40.994873046875 3.289253234863281 39.21379470825195 1.499996185302734 36.77455520629883 1.499996185302734 L 8.825893402099609 1.499996185302734 M 8.825893402099609 -3.814697265625e-06 L 36.77455520629883 -3.814697265625e-06 C 41.64896392822266 -3.814697265625e-06 45.60044479370117 5.630622863769531 45.60044479370117 10.50503540039062 L 45.60044479370117 33.83258438110352 C 45.60044479370117 40.33179473876953 40.33179473876953 45.60044479370117 33.83258438110352 45.60044479370117 L 11.76785278320312 45.60044479370117 C 5.268653869628906 45.60044479370117 -3.814697265625e-06 40.33179473876953 -3.814697265625e-06 33.83258438110352 L -3.814697265625e-06 8.825893402099609 C -3.814697265625e-06 3.951484680175781 3.951484680175781 -3.814697265625e-06 8.825893402099609 -3.814697265625e-06 Z" stroke="none" fill="#3fa7ce"/>
</g>
</svg>

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 ",
};

@ -0,0 +1,6 @@
<svg id="info-circle" xmlns="http://www.w3.org/2000/svg" width="31.269" height="31.269" viewBox="0 0 31.269 31.269">
<path id="Vector" d="M13.029,26.057A13.029,13.029,0,1,0,0,13.029,13.067,13.067,0,0,0,13.029,26.057Z" transform="translate(2.606 2.606)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0V6.514" transform="translate(15.634 10.423)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H.012" transform="translate(15.627 20.846)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H31.269V31.269H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 829 B

@ -0,0 +1,5 @@
<svg id="shield-tick" xmlns="http://www.w3.org/2000/svg" width="52.115" height="52.115" viewBox="0 0 52.115 52.115">
<path id="Vector" d="M15.374.5,4.538,4.587A7.535,7.535,0,0,0,0,11.123V27.257a10.557,10.557,0,0,0,3.757,7.47l9.337,6.97a9.883,9.883,0,0,0,11.161,0l9.337-6.97a10.557,10.557,0,0,0,3.757-7.47V11.123a7.54,7.54,0,0,0-4.538-6.558L21.975.5A11.041,11.041,0,0,0,15.374.5Z" transform="translate(7.405 4.337)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,5.841l3.5,3.5L12.833,0" transform="translate(19.652 19.934)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H52.115V52.115H0Z" transform="translate(52.115 52.115) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 864 B

@ -0,0 +1,5 @@
<svg id="tick-circle" xmlns="http://www.w3.org/2000/svg" width="55.143" height="55.143" viewBox="0 0 55.143 55.143">
<path id="Vector" d="M22.976,45.952A22.976,22.976,0,1,0,0,22.976,23.044,23.044,0,0,0,22.976,45.952Z" transform="translate(4.595 4.595)" fill="#42e337" stroke="#9eff97" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,6.5,6.5,13,19.53,0" transform="translate(17.807 21.069)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H55.143V55.143H0Z" fill="#afe7ab" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 652 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.774" height="16.04" viewBox="0 0 17.774 16.04">
<path id="Vector" d="M0,6.069V4.335A4.035,4.035,0,0,1,3.633.052,4.615,4.615,0,0,1,4.335,0h7.8a3.965,3.965,0,0,1,.65.043,4.044,4.044,0,0,1,3.685,4.292V5.593h-1.8A1.787,1.787,0,0,0,12.9,7.526a1.849,1.849,0,0,0,1.873,1.621h1.7V10.4a4.1,4.1,0,0,1-4.335,4.335H9.971" transform="translate(0.65 0.65)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
</svg>

After

Width:  |  Height:  |  Size: 499 B

@ -0,0 +1,4 @@
<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="Vector" d="M15.84,0,9.32,6.52a1.986,1.986,0,0,1-2.8,0L0,0" transform="translate(4.08 8.95)" fill="none" stroke="#2d57cb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(24 24) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 434 B

@ -0,0 +1,7 @@
<svg id="element-4" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809">
<path id="Vector" d="M7.37,7.717v-5.9C7.37.52,6.815,0,5.436,0h-3.5C.555,0,0,.52,0,1.821v5.9c0,1.3.555,1.821,1.934,1.821h3.5C6.815,9.538,7.37,9.017,7.37,7.717Z" transform="translate(11.705 1.734)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M7.37,3.382V1.821C7.37.52,6.815,0,5.436,0h-3.5C.555,0,0,.52,0,1.821V3.382C0,4.682.555,5.2,1.934,5.2h3.5C6.815,5.2,7.37,4.682,7.37,3.382Z" transform="translate(11.705 13.873)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M7.37,1.821v5.9c0,1.3-.555,1.821-1.934,1.821h-3.5C.555,9.538,0,9.017,0,7.717v-5.9C0,.52.555,0,1.934,0h3.5C6.815,0,7.37.52,7.37,1.821Z" transform="translate(1.734 9.538)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M7.37,1.821V3.382c0,1.3-.555,1.821-1.934,1.821h-3.5C.555,5.2,0,4.682,0,3.382V1.821C0,.52.555,0,1.934,0h3.5C6.815,0,7.37.52,7.37,1.821Z" transform="translate(1.734 1.734)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H20.809V20.809H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -0,0 +1,6 @@
<svg id="folder-open" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809">
<path id="Vector" d="M16.781,2.861,16.434,7.2c-.13,1.327-.234,2.341-2.584,2.341H2.943C.593,9.538.489,8.523.359,7.2L.012,2.861A2.628,2.628,0,0,1,.576.962L.593.945A2.579,2.579,0,0,1,2.6,0H14.2a2.57,2.57,0,0,1,1.986.928c.009.009.017.017.017.026A2.536,2.536,0,0,1,16.781,2.861Z" transform="translate(2.008 9.538)" fill="none" stroke="#247deb" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M0,8.15V3.685C0,.737.737,0,3.685,0h1.1A1.749,1.749,0,0,1,6.555.884l1.1,1.474a1.172,1.172,0,0,0,1.179.59h2.211c2.948,0,3.685.737,3.685,3.685V8.185" transform="translate(3.035 1.76)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H4.457" transform="translate(8.176 14.74)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H20.809V20.809H0Z" transform="translate(20.809 20.809) rotate(180)" fill="none" opacity="0"/>
</svg>

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 */
}

@ -0,0 +1,6 @@
<svg id="logout" xmlns="http://www.w3.org/2000/svg" width="24.545" height="24.545" viewBox="0 0 24.545 24.545">
<path id="Vector" d="M0,5.185C.317,1.5,2.209,0,6.351,0h.133c4.571,0,6.4,1.831,6.4,6.4V13.07c0,4.571-1.831,6.4-6.4,6.4H6.351c-4.111,0-6-1.483-6.341-5.1" transform="translate(9.102 2.547)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M11.638,0H0" transform="translate(3.702 12.272)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M3.426,0,0,3.426,3.426,6.852" transform="translate(2.557 8.846)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H24.545V24.545H0Z" transform="translate(24.545 24.545) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 943 B

@ -0,0 +1,8 @@
<svg id="message-text" xmlns="http://www.w3.org/2000/svg" width="22" height="23.237" viewBox="0 0 22 23.237">
<path id="Vector" d="M5.438,0h7.251q5.438,0,5.438,5.809V18.4a.942.942,0,0,1-.906.968H5.438Q0,19.364,0,13.555V5.809Q0,0,5.438,0Z" transform="translate(1.936 1.936)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<g id="Group" transform="translate(6.159 9.198)">
<path id="Vector-2" data-name="Vector" d="M9.682,0H0" fill="#fff" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M6.777,0H0" transform="translate(2.905 4.841)" fill="#fff" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
</g>
<path id="Vector-4" data-name="Vector" d="M22,0H0V23.237H22Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 874 B

@ -0,0 +1,4 @@
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
<path id="Vector" d="M.025,9.556a9.631,9.631,0,0,0,17.352,4.858c.752-1.017.348-1.7-.907-1.467a8.7,8.7,0,0,1-1.907.128A8.547,8.547,0,0,1,6.4,4.716,8.154,8.154,0,0,1,7.083,1.37c.5-1.137-.1-1.677-1.247-1.192A9.442,9.442,0,0,0,.025,9.556Z" transform="translate(1.836 1.829)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M0,0H22V22H0Z" transform="translate(22 22) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 597 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 48 KiB

@ -0,0 +1,5 @@
<svg id="sms" xmlns="http://www.w3.org/2000/svg" width="21.904" height="21.904" viewBox="0 0 21.904 21.904">
<path id="Vector" d="M13.69,15.516H4.563C1.825,15.516,0,14.147,0,10.952V4.563C0,1.369,1.825,0,4.563,0H13.69c2.738,0,4.563,1.369,4.563,4.563v6.389C18.254,14.147,16.428,15.516,13.69,15.516Z" transform="translate(1.825 3.194)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M9.127,0,6.27,2.282a2.889,2.889,0,0,1-3.423,0L0,0" transform="translate(6.389 8.214)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H21.9V21.9H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 755 B

@ -0,0 +1,9 @@
<svg id="user-edit" xmlns="http://www.w3.org/2000/svg" width="20.478" height="20.478" viewBox="0 0 20.478 20.478">
<path id="Vector" d="M8.533,4.266A4.266,4.266,0,1,1,4.266,0,4.266,4.266,0,0,1,8.533,4.266Z" transform="translate(5.973 1.707)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<g id="Group" transform="translate(12.945 12.941)">
<path id="Vector-2" data-name="Vector" d="M3.446.489.426,3.509a1.051,1.051,0,0,0-.256.5L.008,5.165a.542.542,0,0,0,.648.648l1.152-.162a1.015,1.015,0,0,0,.5-.256L5.332,2.375a1.165,1.165,0,0,0,0-1.894A1.161,1.161,0,0,0,3.446.489Z" transform="translate(0 0)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M0,0A2.718,2.718,0,0,0,1.894,1.894" transform="translate(3.011 0.924)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
</g>
<path id="Vector-4" data-name="Vector" d="M0,5.973C0,2.671,3.285,0,7.329,0A8.79,8.79,0,0,1,9.864.367" transform="translate(2.91 12.799)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H20.478V20.478H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,8 @@
<svg id="wallet-money" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809">
<path id="Vector" d="M6.2,0V1.76a2.916,2.916,0,0,1-3.1,2.7A2.924,2.924,0,0,1,0,1.76V0C0,1.491,1.387,2.549,3.1,2.549S6.2,1.483,6.2,0Z" transform="translate(3.123 14.619)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M6.208,2.688a2.275,2.275,0,0,1-.329,1.179A3.186,3.186,0,0,1,3.1,5.237,3.206,3.206,0,0,1,.329,3.867,2.274,2.274,0,0,1,0,2.688,2.518,2.518,0,0,1,.9.789,3.309,3.309,0,0,1,3.1,0,3.355,3.355,0,0,1,5.289.789,2.465,2.465,0,0,1,6.208,2.688Z" transform="translate(3.113 9.546)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M6.2,2.7V5.081C6.2,6.572,4.812,7.63,3.1,7.63S0,6.564,0,5.081V2.7A2.919,2.919,0,0,1,3.1,0,3.355,3.355,0,0,1,5.3.789,2.536,2.536,0,0,1,6.2,2.7Z" transform="translate(3.123 9.538)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M4.447.884V2.671a.89.89,0,0,1-.867.884h-1.7A1.849,1.849,0,0,1,.008,1.934,1.741,1.741,0,0,1,.528.52,1.728,1.728,0,0,1,1.777,0h1.8A.89.89,0,0,1,4.447.884Z" transform="translate(14.628 8.627)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-5" data-name="Vector" d="M0,6.069V4.335A4.035,4.035,0,0,1,3.633.052,4.615,4.615,0,0,1,4.335,0h7.8a3.965,3.965,0,0,1,.65.043,4.044,4.044,0,0,1,3.685,4.292V5.593h-1.8A1.787,1.787,0,0,0,12.9,7.526a1.849,1.849,0,0,0,1.873,1.621h1.7V10.4a4.1,4.1,0,0,1-4.335,4.335H9.971" transform="translate(1.734 3.035)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-6" data-name="Vector" d="M0,0H20.809V20.809H0Z" transform="translate(20.809 20.809) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

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",
};

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<circle id="Ellipse_18" data-name="Ellipse 18" cx="8" cy="8" r="8" fill="#89ecff"/>
</svg>

After

Width:  |  Height:  |  Size: 177 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<circle id="Ellipse_17" data-name="Ellipse 17" cx="8" cy="8" r="8" fill="#924eeb"/>
</svg>

After

Width:  |  Height:  |  Size: 177 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<circle id="Ellipse_19" data-name="Ellipse 19" cx="8" cy="8" r="8" fill="#fc5353"/>
</svg>

After

Width:  |  Height:  |  Size: 177 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_linear_heart" data-name="vuesax/linear/heart" transform="translate(-236 -188)">
<g id="heart">
<path id="Vector" d="M10.62,17.71a2.181,2.181,0,0,1-1.24,0C6.48,16.72,0,12.59,0,5.59A5.574,5.574,0,0,1,5.56,0,5.515,5.515,0,0,1,10,2.24,5.547,5.547,0,0,1,20,5.59C20,12.59,13.52,16.72,10.62,17.71Z" transform="translate(238 191.1)" fill="none" stroke="#e11010" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(236 188)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 675 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="26.141" height="27.811" viewBox="0 0 26.141 27.811">
<path id="Vector" d="M0,13.909V8.217C0,.872,5.192-2.089,11.537,1.564L16.46,4.41l4.923,2.846c6.345,3.653,6.345,9.653,0,13.306L16.46,23.408l-4.923,2.846C5.192,29.907,0,26.907,0,19.6Z" fill="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 305 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<circle id="Ellipse_20" data-name="Ellipse 20" cx="8" cy="8" r="8" fill="#fcf653"/>
</svg>

After

Width:  |  Height:  |  Size: 177 B

@ -30,6 +30,12 @@ import Feedback from "../components/Feedback";
import Features from '../components/Features';
import Blogs from "../components/Blogs";
import ProductSuggestion from "../components/ProductSuggestion";
import PanelSidebar from "../components/SidebarMenu";
import Advertisement from "../components/Advertisement";
import CourseChapter from "../components/CourseChapter";
import Design2D from "../components/Design2D";
import ProductStatusCard from "../components/ProductStatusCard";
import VodProductNew from "../components/VodProductNew";
const components = [
{
@ -554,6 +560,66 @@ const components = [
code: null,
},
},
{
name: "Panel Sidebar",
author: "Andalib",
props: [],
content: {
name: "Panel Sidebar",
component: <PanelSidebar />,
code: null,
},
},
{
name: "Advertisements",
author: "Andalib",
props: [],
content: {
name: "Advertisements",
component: <Advertisement />,
code: null,
},
},
{
name: "Course Chapter",
author: "Andalib",
props: [],
content: {
name: "Course Chapter",
component: <CourseChapter />,
code: null,
},
},
{
name: "2D Design",
author: "Andalib",
props: [],
content: {
name: "2D Design",
component: <Design2D />,
code: null,
},
},
{
name: "Product Status Card",
author: "Andalib",
props: [],
content: {
name: "Product Status Card",
component: <ProductStatusCard />,
code: null,
},
},
{
name: "VOD Product",
author: "Andalib",
props: [],
content: {
name: "VOD Product",
component: <VodProductNew />,
code: null,
},
},
];
export default components;

Loading…
Cancel
Save