Reza_ashrafi
/
tailwind-shop-design-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 18 files

Browse Source
master
mahdi 3 years ago
parent cc19e41801
commit c125156bea
18 changed files with 115 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/Views/Home/Main/index.js
  2. 2
      src/components/Blogs/design1/index.js
  3. 4
      src/components/Blogs/design2/index.js
  4. 4
      src/components/Blogs/design3/index.js
  5. 2
      src/components/Blogs/design4/index.js
  6. 2
      src/components/Blogs/design5/index.js
  7. 2
      src/components/Blogs/design6/index.js
  8. 82
      src/components/Calendar/CalendarComponents/Calendar.js
  9. 2
      src/components/Code/index.js
  10. 4
      src/components/Counter/index.js
  11. 10
      src/components/Features/index.js
  12. 18
      src/components/Footer/index.js
  13. 6
      src/components/Navbar/index.js
  14. 10
      src/components/Product/index.js
  15. 6
      src/components/ProductStatusCard/index.js
  16. 18
      src/components/ProductSuggestion/index.js
  17. 2
      src/components/SidebarMenu/index.js
  18. 4
      src/components/VodProductNew/index.js

14
src/Views/Home/Main/index.js
Unescape View File

@ -7,10 +7,10 @@ function Main({ activeComponent }) {
<div className="lg:flex lg:flex-col lg:w-5/6 lg:h-full border-r border-gray-200"> <div className="lg:flex lg:flex-col lg:w-5/6 lg:h-full border-r border-gray-200">
<header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700"></header> <header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700"></header>
<section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col"> <section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col">
<h1 className="font-bold text-3xl text-left"> <h1 className="font-sansbold text-3xl text-left">
{activeComponent?.content?.name} {activeComponent?.content?.name}
</h1> </h1>
<span className="font-bold text-xs mb-10 text-left block"> <span className="font-sansbold text-xs mb-10 text-left block">
{activeComponent?.name && `Designed by: ${activeComponent?.author}`} {activeComponent?.name && `Designed by: ${activeComponent?.author}`}
</span> </span>
{activeComponent?.content?.component} {activeComponent?.content?.component}
@ -22,11 +22,11 @@ function Main({ activeComponent }) {
<table className="w-full" style={{ direction: "ltr" }}> <table className="w-full" style={{ direction: "ltr" }}>
<thead> <thead>
<tr> <tr>
<th className="font-bold text-lg">Name</th> <th className="font-sansbold text-lg">Name</th>
<th className="font-bold text-lg">Type</th> <th className="font-sansbold text-lg">Type</th>
<th className="font-bold text-lg">Required</th> <th className="font-sansbold text-lg">Required</th>
<th className="font-bold text-lg">Default value</th> <th className="font-sansbold text-lg">Default value</th>
<th className="font-bold text-lg">Description</th> <th className="font-sansbold text-lg">Description</th>
</tr> </tr>
</thead> </thead>
<tbody className="w-full divided divide-y"> <tbody className="w-full divided divide-y">

2
src/components/Blogs/design1/index.js
Unescape View File

@ -19,7 +19,7 @@ const BlogDesign1 = ({
</div> </div>
<div className="w-3/5 mr-4 flex flex-col justify-between py-2"> <div className="w-3/5 mr-4 flex flex-col justify-between py-2">
<div> <div>
<h2 className="text-base text-justify text-grayTextColor font-bold leading-6"> <h2 className="text-base text-justify text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogExcerpt && ( {blogExcerpt && (

4
src/components/Blogs/design2/index.js
Unescape View File

@ -41,11 +41,11 @@ const BlogDesign2 = ({
</button> </button>
)} )}
<div className="z-10 child-text"> <div className="z-10 child-text">
<h2 className="text-white text-base font-bold leading-6"> <h2 className="text-white text-base font-sansbold leading-6">
آیا مواد غذایی پر فیبر مفید هستند؟ آیا مواد غذایی پر فیبر مفید هستند؟
</h2> </h2>
{blogSubTitle && ( {blogSubTitle && (
<h2 className="text-white text-base mt-2 font-bold leading-6"> <h2 className="text-white text-base mt-2 font-sansbold leading-6">
شما چه فکری می کنید شما چه فکری می کنید
</h2> </h2>
)} )}

4
src/components/Blogs/design3/index.js
Unescape View File

@ -31,13 +31,13 @@ const BlogDesign3 = ({
{/* <img src={blogFeaturedImage2} alt="" /> */} {/* <img src={blogFeaturedImage2} alt="" /> */}
<div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20"> <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
<h2 <h2
className={`text-base text-justify font-bold leading-6 ${blogTitleColor}`} className={`text-base text-justify font-sansbold leading-6 ${blogTitleColor}`}
> >
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogSubTitle && ( {blogSubTitle && (
<h2 <h2
className={`text-base text-justify mt-2 font-bold leading-6 ${blogTitleColor}`} className={`text-base text-justify mt-2 font-sansbold leading-6 ${blogTitleColor}`}
> >
نظر شما چیه نظر شما چیه
</h2> </h2>

2
src/components/Blogs/design4/index.js
Unescape View File

@ -21,7 +21,7 @@ const BlogDesign4 = ({
</div> </div>
<div className="w-3/5 flex flex-col justify-between py-3 transform translate-x-10"> <div className="w-3/5 flex flex-col justify-between py-3 transform translate-x-10">
<div> <div>
<h2 className="text-base text-grayTextColor font-bold leading-6"> <h2 className="text-base text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogExcerpt && ( {blogExcerpt && (

2
src/components/Blogs/design5/index.js
Unescape View File

@ -22,7 +22,7 @@ const BlogDesign5 = ({
</div> </div>
<div className="w-3/5 flex flex-col justify-between py-3 mr-4"> <div className="w-3/5 flex flex-col justify-between py-3 mr-4">
<div> <div>
<h2 className="text-base text-justify text-grayTextColor font-bold leading-6"> <h2 className="text-base text-justify text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogExcerpt && ( {blogExcerpt && (

2
src/components/Blogs/design6/index.js
Unescape View File

@ -18,7 +18,7 @@ const BlogDesign6 = ({
<div className=""> <div className="">
<img src={FeaturedImage} alt="" className="w-full" /> <img src={FeaturedImage} alt="" className="w-full" />
<div className="py-2"> <div className="py-2">
<h2 className="text-base text-justify text-grayTextColor mt-2 font-bold leading-6"> <h2 className="text-base text-justify text-grayTextColor mt-2 font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogExcerpt && ( {blogExcerpt && (

82
src/components/Calendar/CalendarComponents/Calendar.js
Unescape View File

@ -1,20 +1,20 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from "react";
import { import {
getDateAccordingToMonth, getDateAccordingToMonth,
shallowClone, shallowClone,
getValueType, getValueType,
} from './shared/generalUtils'; } from "./shared/generalUtils";
import { import {
TYPE_SINGLE_DATE, TYPE_SINGLE_DATE,
TYPE_RANGE, TYPE_RANGE,
TYPE_MUTLI_DATE, TYPE_MUTLI_DATE,
} from './shared/constants'; } from "./shared/constants";
import { useLocaleUtils, useLocaleLanguage } from './shared/hooks'; import { useLocaleUtils, useLocaleLanguage } from "./shared/hooks";
import { Header, MonthSelector, YearSelector, DaysList } from './components'; import { Header, MonthSelector, YearSelector, DaysList } from "./components";
const Calendar = ({ const Calendar = ({
value, value,
onChange, onChange,
onDisabledDayError, onDisabledDayError,
@ -38,12 +38,12 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
customDaysClassName, customDaysClassName,
events, events,
renderEvents, renderEvents,
type type,
}) => { }) => {
const calendarElement = useRef(null); const calendarElement = useRef(null);
const [mainState, setMainState] = useState({ const [mainState, setMainState] = useState({
activeDate: null, activeDate: null,
monthChangeDirection: '', monthChangeDirection: "",
isMonthSelectorOpen: false, isMonthSelectorOpen: false,
isYearSelectorOpen: false, isYearSelectorOpen: false,
}); });
@ -51,10 +51,10 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
useEffect(() => { useEffect(() => {
const handleKeyUp = ({ key }) => { const handleKeyUp = ({ key }) => {
/* istanbul ignore else */ /* istanbul ignore else */
if (key === 'Tab') if (key === "Tab")
calendarElement.current.classList.remove('-noFocusOutline'); calendarElement.current.classList.remove("-noFocusOutline");
}; };
calendarElement.current.addEventListener('keyup', handleKeyUp, false); calendarElement.current.addEventListener("keyup", handleKeyUp, false);
return () => { return () => {
// calendarElement.current.removeEventListener('keyup', handleKeyUp, false); // calendarElement.current.removeEventListener('keyup', handleKeyUp, false);
}; };
@ -68,8 +68,8 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
setMainState({ ...mainState, [property]: !mainState[property] }); setMainState({ ...mainState, [property]: !mainState[property] });
}; };
const toggleMonthSelector = createStateToggler('isMonthSelectorOpen'); const toggleMonthSelector = createStateToggler("isMonthSelectorOpen");
const toggleYearSelector = createStateToggler('isYearSelectorOpen'); const toggleYearSelector = createStateToggler("isYearSelectorOpen");
const getComputedActiveDate = () => { const getComputedActiveDate = () => {
const valueType = getValueType(value); const valueType = getValueType(value);
@ -85,8 +85,12 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
: getComputedActiveDate(); : getComputedActiveDate();
const weekdays = weekDaysList.map((weekDay) => ( const weekdays = weekDaysList.map((weekDay) => (
<abbr key={weekDay.name} title={weekDay.name} className={`Calendar__weekDay ${type}`}> <abbr
{ type == 'dashboard' ? weekDay.name : weekDay.short} key={weekDay.name}
title={weekDay.name}
className={`Calendar__weekDay ${type}`}
>
{type == "dashboard" ? weekDay.name : weekDay.short}
</abbr> </abbr>
)); ));
@ -104,7 +108,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
activeDate, activeDate,
mainState.monthChangeDirection mainState.monthChangeDirection
), ),
monthChangeDirection: '', monthChangeDirection: "",
}); });
}; };
@ -126,13 +130,14 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
return ( return (
<div <div
className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${isRtl ? 'rtl' : 'ltr' className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${
isRtl ? "rtl" : "ltr"
}`} }`}
role="grid" role="grid"
style={{ style={{
'--cl-color-primary': colorPrimary, "--cl-color-primary": colorPrimary,
'--cl-color-primary-light': colorPrimaryLight, "--cl-color-primary-light": colorPrimaryLight,
'--animation-duration': slideAnimationDuration, "--animation-duration": slideAnimationDuration,
}} }}
ref={calendarElement} ref={calendarElement}
> >
@ -196,18 +201,28 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
isQuickSelectorOpen={ isQuickSelectorOpen={
mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen
} }
showEvent={event => setEventInFooter(event)} showEvent={(event) => setEventInFooter(event)}
type={type} type={type}
/> />
<div className="Calendar__footer"> <div className="Calendar__footer">
<div className={`footer__Events ${type}`}> <div className={`footer__Events ${type}`}>
{ {type == "dashboard" ? (
type == 'dashboard' ? <><div className='text-xl font-black text-blue-400'>رویداد ها: </div><p className='text-blue-300 font-bold'>{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}</p></> : eventInFooter <>
} <div className="text-xl font-black text-blue-400">
رویداد ها:{" "}
</div>
<p className="text-blue-300 font-sansbold">
{eventInFooter
? eventInFooter
: "رویدادی در این روز وجود ندارد!"}
</p>
</>
) : (
eventInFooter
)}
</div>
{renderFooter()}
</div> </div>
{renderFooter()}</div>
</div> </div>
); );
}; };
@ -215,17 +230,16 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
Calendar.defaultProps = { Calendar.defaultProps = {
minimumDate: null, minimumDate: null,
maximumDate: null, maximumDate: null,
colorPrimary: '#0eca2d', colorPrimary: "#0eca2d",
colorPrimaryLight: '#cff4d5', colorPrimaryLight: "#cff4d5",
slideAnimationDuration: '0.4s', slideAnimationDuration: "0.4s",
calendarClassName: '', calendarClassName: "",
locale: 'en', locale: "en",
value: null, value: null,
renderFooter: () => null, renderFooter: () => null,
renderEvents : () => null, renderEvents: () => null,
customDaysClassName: [], customDaysClassName: [],
events: [], events: [],
}; };
export default Calendar; export default Calendar;

2
src/components/Code/index.js
Unescape View File

@ -32,7 +32,7 @@ function Code({ code }) {
</span> </span>
</div> </div>
<div <div
className={`font-bold text-lg cursor-pointer ${ className={`font-sansbold text-lg cursor-pointer ${
height === 350 ? "text-blue-500" : "text-red-500" height === 350 ? "text-blue-500" : "text-red-500"
}`} }`}
onClick={() => setHeight(() => (height == 350 ? "auto" : 350))} onClick={() => setHeight(() => (height == 350 ? "auto" : 350))}

4
src/components/Counter/index.js
Unescape View File

@ -15,7 +15,9 @@ const Counter = ({ incrementIcon, decrementIcon, flex }) => {
onClick={() => setCount(count + 1)} onClick={() => setCount(count + 1)}
/> />
<span <span
className={`text-sm sm:text-base md:text-2xl font-bold text-color ${flex === 'flex-col' ? 'my-2' : 'mx-2'}`} className={`text-sm sm:text-base md:text-2xl font-sansbold text-color ${
flex === "flex-col" ? "my-2" : "mx-2"
}`}
style={count > 0 ? { color: "green" } : { color: "red" }} style={count > 0 ? { color: "green" } : { color: "red" }}
> >
{count} {count}

10
src/components/Features/index.js
Unescape View File

@ -10,7 +10,7 @@ import plane from "./plane.svg";
const Features = ({ features }) => { const Features = ({ features }) => {
return ( return (
<section className="bg-white border-2 border-gray-400 rounded m-7"> <section className="bg-white border-2 border-gray-400 rounded m-7">
<h2 className="text-lg font-bold text-productTitle mr-7 my-5"> <h2 className="text-lg font-sansbold text-productTitle mr-7 my-5">
امکانات و ویژگی ها امکانات و ویژگی ها
</h2> </h2>
<div className="w-full flex flex-wrap justify-around items-center"> <div className="w-full flex flex-wrap justify-around items-center">
@ -27,7 +27,9 @@ const Features = ({ features }) => {
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex items-center"> <div className="flex items-center">
<strong className={`text-base font-medium`}>{feature.title}</strong> <strong className={`text-base font-medium`}>
{feature.title}
</strong>
<span <span
className={`mr-4 text-xs px-2 py-1 rounded-lg bg-blue-100`} className={`mr-4 text-xs px-2 py-1 rounded-lg bg-blue-100`}
> >
@ -43,9 +45,7 @@ const Features = ({ features }) => {
</div> </div>
<div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-blue-100 "> <div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-blue-100 ">
<div> <div>
<h2 className="font-semibold text-base"> <h2 className="font-semibold text-base">هزاران درصد تحفیف</h2>
هزاران درصد تحفیف
</h2>
<p className="mt-4 text-sm"> <p className="mt-4 text-sm">
با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار
شوید شوید

18
src/components/Footer/index.js
Unescape View File

@ -13,18 +13,18 @@ const FooterDesign1 = ({ color, bg, links }) => {
> >
<div className="flex items-start"> <div className="flex items-start">
<> <>
{ {links.map((section, index) => (
links.map((section, index) => <ul className="mr-10" key={index}> <ul className="mr-10" key={index}>
{ {section.map((link, index) => (
section.map((link, index) => <li <li
className={`font-light text-xs leading-7 hover:font-bold footer-items ${color}`} className={`font-light text-xs leading-7 hover:font-sansbold footer-items ${color}`}
key={index} key={index}
> >
<a href="">{link}</a> <a href="">{link}</a>
</li>) </li>
} ))}
</ul>) </ul>
} ))}
</> </>
</div> </div>
<div className="flex items-center mt-10 md:mt-0"> <div className="flex items-center mt-10 md:mt-0">

6
src/components/Navbar/index.js
Unescape View File

@ -50,11 +50,13 @@ const HeaderDesign1 = ({
</> </>
<div className="flex justify-between items-center relative"> <div className="flex justify-between items-center relative">
<div className="ml-10"> <div className="ml-10">
<span className={`text-sm font-bold ml-4 text-gray-700`}> <span className={`text-sm font-sansbold ml-4 text-gray-700`}>
Design System Design System
</span> </span>
{category && ( {category && (
<span className={`text-sm font-bold ${productCategoryTextColor}`}> <span
className={`text-sm font-sansbold ${productCategoryTextColor}`}
>
دسته بندی ها دسته بندی ها
</span> </span>
)} )}

10
src/components/Product/index.js
Unescape View File

@ -50,7 +50,7 @@ const ProductDesign = ({
<div className="absolute left-2 top-2"> <div className="absolute left-2 top-2">
{discountPricePercent && ( {discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2"> <div className="bg-discountPriceBg rounded-md px-2">
<p className="text-discountPriceTitle font-bold text-xs"> <p className="text-discountPriceTitle font-sansbold text-xs">
23<span>%</span> 23<span>%</span>
</p> </p>
</div> </div>
@ -148,7 +148,7 @@ const ProductDesign = ({
{star && ( {star && (
<div className="flex items-center mt-2"> <div className="flex items-center mt-2">
<StarRating /> <StarRating />
<span className="text-xs text-productContent font-bold mr-2"> <span className="text-xs text-productContent font-sansbold mr-2">
39 39
</span> </span>
</div> </div>
@ -190,9 +190,9 @@ const ProductDesign = ({
)} )}
{productTags && ( {productTags && (
<div className="mt-2 flex flex-wrap"> <div className="mt-2 flex flex-wrap">
{ {productTags.map((item, index) => (
productTags.map((item, index) => <Tag title={item} key={index} />) <Tag title={item} key={index} />
} ))}
</div> </div>
)} )}
{rangeHolder && ( {rangeHolder && (

6
src/components/ProductStatusCard/index.js
Unescape View File

@ -24,13 +24,13 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
<img src={item.icon} alt="" className="w-8" /> <img src={item.icon} alt="" className="w-8" />
<div className="flex flex-col mr-3"> <div className="flex flex-col mr-3">
<p className="text-sm"> <p className="text-sm">
<span className="font-bold">{item.subtitle}</span> <span className="font-sansbold">{item.subtitle}</span>
{item.title} {item.title}
</p> </p>
{item.customerSatisfaction && ( {item.customerSatisfaction && (
<p className="text-xs mt-1"> <p className="text-xs mt-1">
رضایت خریداران: رضایت خریداران:
<span className="font-bold text-green-500 mr-2"> <span className="font-sansbold text-green-500 mr-2">
{item.customerSatisfactionPercent} {item.customerSatisfactionPercent}
</span> </span>
</p> </p>
@ -64,7 +64,7 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
<img src={arrow} alt="" className="w-20 h-20" /> <img src={arrow} alt="" className="w-20 h-20" />
</div> </div>
<div className="flex flex-col mr-5"> <div className="flex flex-col mr-5">
<h2 className="text-sm font-bold text-blue-900"> <h2 className="text-sm font-sansbold text-blue-900">
بازگشت بی چون و چرا بازگشت بی چون و چرا
</h2> </h2>
<p className="text-xs mt-2 leading-5 text-justify"> <p className="text-xs mt-2 leading-5 text-justify">

18
src/components/ProductSuggestion/index.js
Unescape View File

@ -8,13 +8,17 @@ const ProductSuggestion = ({ suggestions }) => {
return ( return (
<section className="m-10 border-2 border-gray-300 p-4 rounded-lg"> <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
<h2 className="text-center text-lg font-bold text-productPrice"> <h2 className="text-center text-lg font-sansbold text-productPrice">
این کالاها برای خرید به شما پیشنهام می دهیم این کالاها برای خرید به شما پیشنهام می دهیم
</h2> </h2>
{/* product design */} {/* product design */}
<div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full"> <div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full">
{suggestions.map((suggestion, index) => ( {suggestions.map((suggestion, index) => (
<div className="flex flex-row mb-7 justify-center relative" style={{ width : 'calc(100% / 4.5)' }} key={index}> <div
className="flex flex-row mb-7 justify-center relative"
style={{ width: "calc(100% / 4.5)" }}
key={index}
>
<div <div
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 cursor-pointer className={`flex flex-col items-center border rounded-md border-gray-300 p-5 cursor-pointer
${selectedProduct === suggestion ? "bg-white" : ""}`} ${selectedProduct === suggestion ? "bg-white" : ""}`}
@ -37,7 +41,11 @@ const ProductSuggestion = ({ suggestions }) => {
</div> </div>
</div> </div>
{Number(index) !== suggestions.length - 1 && ( {Number(index) !== suggestions.length - 1 && (
<img src={plus} alt="" className="w-5 absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2" /> <img
src={plus}
alt=""
className="w-5 absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2"
/>
)} )}
</div> </div>
))} ))}
@ -45,12 +53,12 @@ const ProductSuggestion = ({ suggestions }) => {
{/* bottom */} {/* bottom */}
<div className="flex flex-col justify-center items-center mt-4"> <div className="flex flex-col justify-center items-center mt-4">
<div className="flex flex-row mb-5"> <div className="flex flex-row mb-5">
<p className="text-base text-productPrice font-bold"> <p className="text-base text-productPrice font-sansbold">
جمع لوازم اختیاری خریداری شده جمع لوازم اختیاری خریداری شده
<span> 56/894/400 </span> <span> 56/894/400 </span>
تومان تومان
</p> </p>
<span className="text-lightBlueTextColor text-base mr-1 font-bold"> <span className="text-lightBlueTextColor text-base mr-1 font-sansbold">
1 کالا 1 کالا
</span> </span>
</div> </div>

2
src/components/SidebarMenu/index.js
Unescape View File

@ -24,7 +24,7 @@ const SidebarMenu = ({ items, buttons }) => {
{/* profile */} {/* profile */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<img src={profilePic} alt="" className="w-12 rounded-full" /> <img src={profilePic} alt="" className="w-12 rounded-full" />
<p className="text-blue-600 font-bold text-base flex-1 mx-2"> <p className="text-blue-600 font-sansbold text-base flex-1 mx-2">
کامران کوهستانی شیرازی کامران کوهستانی شیرازی
</p> </p>
<img src={downwardArrow} alt="" className="w-5" /> <img src={downwardArrow} alt="" className="w-5" />

4
src/components/VodProductNew/index.js
Unescape View File

@ -69,7 +69,7 @@ const VodProduct = ({
<div className="absolute left-2 top-2"> <div className="absolute left-2 top-2">
{discountPricePercent && ( {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"> <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"> <p className="text-discountPriceTitle font-sansbold text-xs">
23<span>%</span> 23<span>%</span>
</p> </p>
</div> </div>
@ -189,7 +189,7 @@ const VodProduct = ({
{star && ( {star && (
<div className="flex items-center"> <div className="flex items-center">
<StarRating /> <StarRating />
<span className="text-xs text-productContent font-bold mr-2"> <span className="text-xs text-productContent font-sansbold mr-2">
39 39
</span> </span>
</div> </div>

Write Preview
Loading…
Cancel
Save