update 18 files

master
mahdi 2 years ago
parent cc19e41801
commit c125156bea
  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. 78
      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

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

@ -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 && (

@ -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>
)} )}

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

@ -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 && (

@ -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 && (

@ -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 && (

@ -1,18 +1,18 @@
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,
@ -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,11 +230,11 @@ 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,
@ -227,5 +242,4 @@ Calendar.defaultProps = {
events: [], events: [],
}; };
export default Calendar; export default Calendar;

@ -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))}

@ -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,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 درصدی ویژه برخوردار
شوید شوید

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

@ -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>
)} )}

@ -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 && (

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

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

@ -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" />

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

Loading…
Cancel
Save